Create Falling Objects in CSS3

Example of using CSS to create falling objects using absolute positioning and CSS3 animation

Snow Example

CSS

We'd had some nice comments about a Christmas theme we had on our site one year, so decided to share the code. The design used only CSS to style the pages, so therefore worked on all browsers without the need for plugins.

What are CSS Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times you want.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

There is no point going over an article that is already explained very well, so there is a link to the page below.

This is the HTML and CSS code we have used.

Using CCS3 Animation on W3C web site

HTML & CSS

<style type="text/css">.snowContainer{width: 100%; height: 300px; background-color: black; overflow: hidden; position: relative;}.snowExample{position: absolute; top: -450px; opacity: .5; text-align: center;animation: SnowExampleSlide ease-in infinite;-webkit-animation: SnowExampleSlide ease-in infinite;-moz-animation: SnowExampleSlide ease-in infinite;-webkit-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;animation-fill-mode: forwards;}@keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-webkit-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-moz-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}</style><div class="snowContainer"><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 0s;animation-delay: 0s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 1s;animation-delay: 1s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 3s;animation-delay: 3s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 0s;animation-delay: 0s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /></div>

There are four smaller images in the example, and two larger, they are set to move at different speeds, which tricks the eye into thinking they are closer.

You will also need to use a certain amount of maths to get the positioning and timing correct for the top, for instance the image used here is 1198x999 pixels, in a div of 300 pixels high.

The image size on screen is set to 400px wide, so the position needs to start from at least (400/1198)*999=333 pixels above the top, and move to the new height of the image plus the div height 333+300=633.

There is also an example of how to center an object when position is set to absolute. They are set to 50% left, and then the left margin is set to half the object width.