Web design and hosting, database, cloud and social media solutions that deliver real business results
  • Business Solutions
    • Robotic Process Automation
    • Bespoke Software
    • Database Services
      • Data Integration
      • Datawarehouse Services
      • Power BI
    • Web Services
      • Logo Design
      • Payment Gateways
      • Web Site Optimisation
      • Web Site Security
      • Technical Tools
    • Cloud Services
      • Amazon Web Services
      • Google Cloud Services
      • Microsoft Azure
    • Microsoft Office
    • Social Media Services
  • Academy
    • Our Test Environment
    • Learning Databases
      • The Basics
      • Get Open Query
      • SQL Server Data
      • SQL Server Maintenance
      • Using SQL Server Dates
      • Using SQL Server Functions
      • Using SQL Server Pivot-Unpivot
      • Technical Tools
    • Learning Web Design
      • Building Ousia Content Management System
      • Using ASP-NET
      • Using CSS
      • Using JavaScript
    • Learning Cloud and IT Services
      • Task Scheduler Error 2147943645
      • Requesting SSL and Generation of PFX file in OpenSSL Simple Steps
    • Using Social Media
      • Asking for a Google Review
      • Changing a Facebook account from personal to business
      • Choosing where to focus Social Media effort
      • Social Media Image Sizes
      • Using Meta Data to set Social Media Images
  • About
    • Blog
      • Building an entry level gaming machine
      • Google Core Update Jan 2020
      • Hot Chilli Internet Closure
      • How To Choose Content For Your Website Adverts Leaflets
      • Preventing Online Scam
      • Skimmers of the gig economy
      • The most annoying things about websites on the Internet
      • Top 5 websites for free Vector Graphics
    • Portfolio
    • Team
      • Adrian Anandan
      • Ali Al Amine
      • Ayse Hur
      • Chester Copperpot
      • Fernando Ancona Camara
      • Gavin Clayton
      • Sai Gangu
      • Suneel Kumar
      • Surya Mukkamala
      • Trevor Momanyi
CS - češtinaDE - DeutschES - EspañolFR - FrançaisHI - हिंदीIT - italianoPL - polskiPT - PortuguêsRU - русскийTR - TürkZH - 中国的

Create Falling Objects in CSS3

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

Snow Example


snowflakessnowflakessnowflakessnowflakessnowflakessnowflakes

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.

Author

Gavin Clayton
Gavin Clayton
I formed Claytabase in 2010 as a way of carrying on my work with SQL Server and ASP.NET. This has culminated in the Ousia Content Management System being taken from concept to one of the quickest CMS's on the market.

Helpful?

Please note, this commenting system is still in final testing.
Copyright Claytabase Ltd 2021, registered in England and Wales 08985867

Site Links

RSS Login ContactCookie PolicySitemap

Social Media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in Touch

+442392064871info@claytabase.co.ukGround Floor, Building 1000, Lakeside North Harbour, Western Road, Portsmouth, Hampshire, United Kingdom, PO6 3EZ

Partnered With

Partners
The settings on this site are set to allow all cookies. These can be changed on our Cookie Policy & Settings page.
By continuing to use this site you agree to the use of cookies.
Ousia Logo
Ousia CMS Loader