#snow-container { position: absolute; width: 100%; } @media (max-width: 700px) { #snow-container { height: 100px; } } @media (min-width: 700px) { #snow-container { height: 175px; } } #snow-container>div:first-child, .snow { z-index: 100; pointer-events: none; } #snow-container>div:first-child { overflow: hidden; position: absolute; top: 0; height: 100%; width: 100%; max-width: 100%; } .snow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation: falling linear infinite both; animation: falling linear infinite both; -webkit-transform: translate3D(0, -100%, 0); transform: translate3D(0, -100%, 0); } .snow.large { -webkit-animation-duration: 10s; animation-duration: 10s; background-image: url("./large.png"); background-size: auto; } .snow.large + .delayed { -webkit-animation-delay: -5s; animation-delay: -5s; } .snow.medium { -webkit-animation-duration: 20s; animation-duration: 20s; background-image: url("./medium.png"); background-size: contain; } .snow.medium + .delayed { -webkit-animation-delay: -10s; animation-delay: -10s; } .snow.small { -webkit-animation-duration: 30s; animation-duration: 30s; background-image: url("./small.png"); background-size: auto; } .snow.small + .delayed { -webkit-animation-delay: -15s; animation-delay: -15s; } @-webkit-keyframes falling { 0% { -webkit-transform: translate3D(-7.5%, -100%, 0); transform: translate3D(-7.5%, -100%, 0); opacity: 0; } 10% { -webkit-transform: translate3D(-7.5%, -100%, 0); transform: translate3D(-7.5%, -100%, 0); opacity: 1; } 100% { -webkit-transform: translate3D(7.5%, 100%, 0); transform: translate3D(7.5%, 100%, 0); } } @keyframes falling { 0% { -webkit-transform: translate3D(-7.5%, -100%, 0); transform: translate3D(-7.5%, -100%, 0); opacity: 0; } 10% { -webkit-transform: translate3D(-7.5%, -100%, 0); transform: translate3D(-7.5%, -100%, 0); opacity: 1; } 100% { -webkit-transform: translate3D(7.5%, 100%, 0); transform: translate3D(7.5%, 100%, 0); } }