.tran-n {
    -webkit-transition:all 300ms linear;
    -moz-transition:all 300ms linear;
    transition:all 300ms linear;
}
/* default animation and transform */
.snowflakes0, .snowflakes1 {
    display: inline-block;
    height: 16px;
    width: 16px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform-origin: left -20px;
    -webkit-animation-name: falling;
    -webkit-animation-duration: 3s;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    -webkit-animation-iteration-count:  20;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    /*-webkit-animation-fill-mode: none;*/
    -webkit-animation-play-state:running;
    /* or */
    -moz-animation: falling 3s linear 2s  20;

    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;

}
/* animation used for ALL snowflakes */
@-webkit-keyframes falling {
    100% {
        -webkit-transform:
            translate3d(0,0,0)
            rotate(0deg)
            scale(0.9,0.9);
    }
    0% {
        -webkit-transform:
            translate3d(30px,500px,0)
            rotate(360deg)
            scale(1.1,1.1);
    }
}

@-moz-keyframes falling {
    100% {
        -moz-transform:
            translate3d(0,0,0)
            rotate(0deg)
            scale(0.9,0.9);
    }
    0% {
        -moz-transform:
            translate(30px,500px)
            rotate(360deg)
            scale(1.1,1.1);
    }
}

/* different sizes, and default origins based on size */
i.snowflakes0:nth-of-type(4n) {
    height:30px;
    width:30px;
    -webkit-transform-origin: right -30px;
    -moz-transform-origin: right -30px;
}
i.snowflakes0:nth-of-type(4n+1) {
    height:24px;
    width:24px;
    -webkit-transform-origin: left -30px;
    -moz-transform-origin: left -30px;
}
i.snowflakes0:nth-of-type(4n+2){
    height:10px;
    width:10px;
    -webkit-transform-origin: -30px 0;
    -moz-transform-origin: -30px 0;
}

/* different speeds, with iteration counts to equal 3minutes approx. */
i.snowflakes0:nth-of-type(4n) {
    -webkit-animation-duration: 5.3s;
    -webkit-animation-iteration-count: 12;
    -webkit-transform-origin: -10px -20px;
    -moz-animation-duration: 5.3s;
    -moz-animation-iteration-count: 12;
    -moz-transform-origin: -10px -20px;
}
i.snowflakes0:nth-of-type(4n+1){
    -webkit-animation-duration: 3.1s;
    -webkit-animation-iteration-count: 20;
    -webkit-transform-origin: 10px -20px;
    -moz-animation-duration: 3.1s;
    -moz-animation-iteration-count: 20;
    -moz-transform-origin: 10px -20px;
}
i.snowflakes0:nth-of-type(4n+2) {
    -webkit-animation-duration: 1.7s;
    -webkit-animation-iteration-count: 35;
    -webkit-transform-origin: right -20px;
    -moz-animation-duration: 1.7s;
    -moz-animation-iteration-count: 35;
    -moz-transform-origin: right -20px;
}

/* different delays so they don't all start at the same time */
i.snowflakes0:nth-of-type(3n) {
    -webkit-animation-delay: 2.3s;
    -moz-animation-delay: 2.3s;
}
i.snowflakes0:nth-of-type(3n+1) {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
i.snowflakes0:nth-of-type(3n+2) {
    -webkit-animation-delay: 3.4s;
    -moz-animation-delay: 3.4s;
}

/* playing with timing functions to make it a teeny bit more random like */
i.snowflakes0:nth-of-type(5n)   {-webkit-animation-timing-function:ease-in-out;}
i.snowflakes0:nth-of-type(5n+1) {-webkit-animation-timing-function:ease-out;}
i.snowflakes0:nth-of-type(5n+2) {-webkit-animation-timing-function:ease;}
i.snowflakes0:nth-of-type(5n+3) {-webkit-animation-timing-function:ease-in;}
i.snowflakes0:nth-of-type(5n+4) {-webkit-animation-timing-function:linear;}
i.snowflakes0:nth-of-type(11n) {-webkit-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);}

i.snowflakes0:nth-of-type(5n)   {-moz-animation-timing-function:ease-in-out;}
i.snowflakes0:nth-of-type(5n+1) {-moz-animation-timing-function:ease-out;}
i.snowflakes0:nth-of-type(5n+2) {-moz-animation-timing-function:ease;}
i.snowflakes0:nth-of-type(5n+3) {-moz-animation-timing-function:ease-in;}
i.snowflakes0:nth-of-type(5n+4) {-moz-animation-timing-function:linear;}
i.snowflakes0:nth-of-type(11n) {-moz-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);}

/* playing with opacity to make it a teeny bit more random like */
i.snowflakes0:nth-of-type(7n){opacity: 0.5}
i.snowflakes0:nth-of-type(7n+2) {opacity: 0.3}
i.snowflakes0:nth-of-type(7n+4) {opacity: 0.7}
i.snowflakes0:nth-of-type(7n+6){opacity: 0.6;
    -webkit-animation-timing-function:ease-in;
    -webkit-transform-origin: left 10px;
    -moz-animation-timing-function:ease-in;
    -moz-transform-origin: left 10px;}
i.snowflakes0:nth-of-type(7n+1){opacity: 0.8}
/*---------  для больших снежинок ---------------*/
	/* different sizes, and default origins based on size */
i.snowflakes1:nth-of-type(4n) {
    height:30px;
    width:30px;
    -webkit-transform-origin: right -30px;
    -moz-transform-origin: right -30px;
}
i.snowflakes1:nth-of-type(4n+1) {
    height:24px;
    width:24px;
    -webkit-transform-origin: left -30px;
    -moz-transform-origin: left -30px;
}
i.snowflakes1:nth-of-type(4n+2){
    height:10px;
    width:10px;
    -webkit-transform-origin: -30px 0;
    -moz-transform-origin: -30px 0;
}

/* different speeds, with iteration counts to equal 3minutes approx. */
i.snowflakes1:nth-of-type(4n) {
    -webkit-animation-duration: 5.3s;
    -webkit-animation-iteration-count: 12;
    -webkit-transform-origin: -10px -20px;
    -moz-animation-duration: 5.3s;
    -moz-animation-iteration-count: 12;
    -moz-transform-origin: -10px -20px;
}
i.snowflakes1:nth-of-type(4n+1){
    -webkit-animation-duration: 3.1s;
    -webkit-animation-iteration-count: 20;
    -webkit-transform-origin: 10px -20px;
    -moz-animation-duration: 3.1s;
    -moz-animation-iteration-count: 20;
    -moz-transform-origin: 10px -20px;
}
i.snowflakes1:nth-of-type(4n+2) {
    -webkit-animation-duration: 1.7s;
    -webkit-animation-iteration-count: 35;
    -webkit-transform-origin: right -20px;
    -moz-animation-duration: 1.7s;
    -moz-animation-iteration-count: 35;
    -moz-transform-origin: right -20px;
}

/* different delays so they don't all start at the same time */
i.snowflakes1:nth-of-type(3n) {
    -webkit-animation-delay: 2.3s;
    -moz-animation-delay: 2.3s;
}
i.snowflakes1:nth-of-type(3n+1) {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
i.snowflakes1:nth-of-type(3n+2) {
    -webkit-animation-delay: 3.4s;
    -moz-animation-delay: 3.4s;
}

/* playing with timing functions to make it a teeny bit more random like */
i.snowflakes1:nth-of-type(5n)   {-webkit-animation-timing-function:ease-in-out;}
i.snowflakes1:nth-of-type(5n+1) {-webkit-animation-timing-function:ease-out;}
i.snowflakes1:nth-of-type(5n+2) {-webkit-animation-timing-function:ease;}
i.snowflakes1:nth-of-type(5n+3) {-webkit-animation-timing-function:ease-in;}
i.snowflakes1:nth-of-type(5n+4) {-webkit-animation-timing-function:linear;}
i.snowflakes1:nth-of-type(11n) {-webkit-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);}

i.snowflakes1:nth-of-type(5n)   {-moz-animation-timing-function:ease-in-out;}
i.snowflakes1:nth-of-type(5n+1) {-moz-animation-timing-function:ease-out;}
i.snowflakes1:nth-of-type(5n+2) {-moz-animation-timing-function:ease;}
i.snowflakes1:nth-of-type(5n+3) {-moz-animation-timing-function:ease-in;}
i.snowflakes1:nth-of-type(5n+4) {-moz-animation-timing-function:linear;}
i.snowflakes1:nth-of-type(11n) {-moz-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);}

/* playing with opacity to make it a teeny bit more random like */
i.snowflakes1:nth-of-type(7n){opacity: 0.5}
i.snowflakes1:nth-of-type(7n+2) {opacity: 0.3}
i.snowflakes1:nth-of-type(7n+4) {opacity: 0.7}
i.snowflakes1:nth-of-type(7n+6){opacity: 0.6;
    -webkit-animation-timing-function:ease-in;
    -webkit-transform-origin: left 10px;
    -moz-animation-timing-function:ease-in;
    -moz-transform-origin: left 10px;}
i.snowflakes1:nth-of-type(7n+1){opacity: 0.8}