@-webkit-keyframes falling { 0% { opacity: 1; -webkit-transform: none; } 60% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; -webkit-transform: translate3d(0, 1000px, 0) rotate(720deg) rotate3d(1, 1, 0, 720deg); } } @keyframes falling { 0% { opacity: 1; transform: none; } 60% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; transform: translate3d(0, 1000px, 0) rotate(720deg) rotate3d(1, 1, 0, 720deg); } } .particules .particule{ position: absolute; background-repeat: repeat; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .particules .particule.small { width: 10px; height: 10px; } .particules .particule.medium { width: 15px; height: 15px; } .particules .particule.large { width: 20px; height: 20px; } .particules .particule.part1.rectangle.small { background-image: url(../img/particles/part1-rect-S.png); } .particules .particule.part1.rectangle.medium { background-image: url(../img/particles/part1-rect-M.png); } .particules .particule.part1.rectangle.large { background-image: url(../img/particles/part1-rect-L.png); } .particules .particule.part2.rectangle.small { background-image: url(../img/particles/part2-rect-S.png); } .particules .particule.part2.rectangle.medium { background-image: url(../img/particles/part2-rect-M.png); } .particules .particule.part2.rectangle.large { background-image: url(../img/particles/part2-rect-L.png); } .particules .particule.part3.rectangle.small { background-image: url(../img/particles/part3-rect-S.png); } .particules .particule.part3.rectangle.medium { background-image: url(../img/particles/part3-rect-M.png); } .particules .particule.part3.rectangle.large { background-image: url(../img/particles/part3-rect-L.png); } .particules .particule.part1.triangle.small { background-image: url(../img/particles/part1-tri-S.png); } .particules .particule.part1.triangle.medium { background-image: url(../img/particles/part1-tri-M.png); } .particules .particule.part1.triangle.large { background-image: url(../img/particles/part1-tri-L.png); } .particules .particule.part2.triangle.small { background-image: url(../img/particles/part2-tri-S.png); } .particules .particule.part2.triangle.medium { background-image: url(../img/particles/part2-tri-M.png); } .particules .particule.part2.triangle.large { background-image: url(../img/particles/part2-tri-L.png); } .particules .particule.part3.triangle.small { background-image: url(../img/particles/part3-tri-S.png); } .particules .particule.part3.triangle.medium { background-image: url(../img/particles/part3-tri-M.png); } .particules .particule.part3.triangle.large { background-image: url(../img/particles/part3-tri-L.png); } .particules .particule.part1.star.small { background-image: url(../img/particles/part1-star-S.png); } .particules .particule.part1.star.medium { background-image: url(../img/particles/part1-star-M.png); } .particules .particule.part1.star.large { background-image: url(../img/particles/part1-star-L.png); } .particules .particule.part2.star.small { background-image: url(../img/particles/part2-star-S.png); } .particules .particule.part2.star.medium { background-image: url(../img/particles/part2-star-M.png); } .particules .particule.part2.star.large { background-image: url(../img/particles/part2-star-L.png); } .particules .particule.part3.star.small { background-image: url(../img/particles/part3-star-S.png); } .particules .particule.part3.star.medium { background-image: url(../img/particles/part3-star-M.png); } .particules .particule.part3.star.large { background-image: url(../img/particles/part3-star-L.png); }