﻿
.fallingSnow {
    text-align: center;
}

.fallingSnow span {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: -280px 60px 54px -34px;
    background: url("../img/snowflake.png");
    -webkit-animation: fallingSnow 12s infinite cubic-bezier(0.35,0.45,0.39,0.29);
    -moz-animation: fallingSnow 12s infinite cubic-bezier(0.35,0.45,0.39,0.29);
}

    .fallingSnow span:nth-child(5n+5) {
        -webkit-animation-delay: 1.3s;
        -moz-animation-delay: 1.3s;
    }

    .fallingSnow span:nth-child(3n+2) {
        -webkit-animation-delay: 1.5s;
        -moz-animation-delay: 1.5s;
    }

    .fallingSnow span:nth-child(2n+5) {
        -webkit-animation-delay: 1.7s;
        -moz-animation-delay: 1.7s;
    }

    .fallingSnow span:nth-child(3n+10) {
        -webkit-animation-delay: 2.7s;
        -moz-animation-delay: 2.7s;
    }

    .fallingSnow span:nth-child(7n+2) {
        -webkit-animation-delay: 3.5s;
        -moz-animation-delay: 3.5s;
    }

    .fallingSnow span:nth-child(4n+5) {
        -webkit-animation-delay: 5.5s;
        -moz-animation-delay: 5.5s;
    }

    .fallingSnow span:nth-child(3n+7) {
        -webkit-animation-delay: 8s;
        -moz-animation-delay: 8s;
    }

@-webkit-keyframes fallingSnow {
    0% {
        opacity: 0.5;
        -webkit-transform: translate(0, 0px) rotateZ(0deg);
    }

    75% {
        opacity: 0.5;
        -webkit-transform: translate(100px, 600px) rotateZ(270deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(150px, 800px) rotateZ(360deg);
    }
}

@-moz-keyframes fallingSnow {
    0% {
        opacity: 0.5;
        -webkit-transform: translate(0, 0px) rotateZ(0deg);
    }

    75% {
        opacity: 0.5;
        -webkit-transform: translate(100px, 600px) rotateZ(270deg);
    }

    100% {
        opacity: 0.5;
        -webkit-transform: translate(150px, 800px) rotateZ(360deg);
    }
}

