diff --git a/jstrr.css b/jstrr.css index 29819a6..a846d32 100644 --- a/jstrr.css +++ b/jstrr.css @@ -16,7 +16,6 @@ background-color: #fff; border-radius: 50%; position: absolute; - animation: animate-snow 10s infinite linear; z-index: 999; } .snow:nth-child(2n+1){ @@ -48,22 +47,57 @@ @keyframes animate-snow { 0% { opacity: 0; - top: 0; } - - 10% { + 20% { + transform:translate(3px,30px) rotate(20deg); opacity: 1; } - + 30% { + transform:translate(0,50px) rotate(50deg); + } + 50% { + transform:translate(-20px,100px) rotate(150deg); + } + 70% { + transform:translate(-40px,150px) rotate(-50deg); + opacity: .8; + } 90% { - opacity: 1; + transform:translate(-60px,200px) rotate(-180deg); } - 100% { + transform:translate(-70px,230px); opacity: 0; - top: 100vh; } } +.snow-inner .snow { + animation: animate-snow linear 6s infinite; + opacity: 0; +} +span.snow-part1,span.snow-part4,span.snow-part7,span.snow-part10,span.snow-part8,span.snow-part11,span.snow-part13,span.snow-part16,span.snow-part19{ + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +span.snow-part2,span.snow-part5{ + -webkit-animation-delay: 1.5s; + animation-delay: 1.5s; +} +span.snow-part3,span.snow-part6,span.snow-part9,span.snow-part12{ + -webkit-animation-delay: 4s; + animation-delay: 4s; +} +span.snow-part8,span.snow-part11,span.snow-part13,span.snow-part16,span.snow-part19{ + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} +span.snow-part14,span.snow-part17{ + -webkit-animation-delay: 2s; + animation-delay: 2s; +} +span.snow-part15,span.snow-part18{ + -webkit-animation-delay: 5s; + animation-delay: 5s; +} table{ margin: 0 auto; background-color: white;