CSS3 Snow Fall Animation Disable internal links

Question

I want to using Snow Fall Animation by using CSS3. But when i use css code, my sites most of internal links disabled. Also i can not select any content from site.

here my code :

body { background-color:#333; }
#snow{
    background: none;
    font-family: Androgyne;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}   

Answer 1

If you have set the CSS of an element to pointer-events: none, it won’t catch any click on it at all, but instead just let the event fall through to the element below it. Need use 'pointer-events: none;' whole code like this:

    #snow{
    background-image: url('/assets/images/s1.png'),
            url('/assets/images/s2.png'),
            url('/assets/images/s3.png');
    height: 100%;
        pointer-events: none;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
/*Keyframes*/
@keyframes snow { 0% { background-position: 500px 0px, 120px 0px, -100px 0px; }
       10% { background-position: 500px 100px, 120px 40px, -100px 30px; }
       20% { background-position: 500px 200px, 120px 80px, -100px 60px; }
       30% { background-position: 500px 300px, 120px 120px, -100px 90px; }
       40% { background-position: 500px 400px, 120px 160px, -100px 120px; }
       50% { background-position: 500px 500px, 120px 200px, -100px 150px; }
       60% { background-position: 500px 600px, 120px 240px, -100px 180px; }
       70% { background-position: 500px 700px, 120px 280px, -100px 210px; }
       80% { background-position: 500px 800px, 120px 320px, -100px 240px; }
       90% { background-position: 500px 900px, 120px 360px, -100px 270px; }
       100% { background-position: 500px 1000px, 120px 400px, -100px 300px; } }

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}