2 Mar 2014

CSS Transformations


Animation is possible by simply using CSS. Animate.css is an example which allows the animation of html elements by simply adding a style to the element. This could be used to add feedback when an event occurs in the UI.

e.g. When a button is pressed you could provide visual feedback that the click has been registered.


Other examples of CSS animation can be seen on the web, one example doing css animation uses the rotate3di js library. see http://premiumcoding.com/jquery/falling-leaves/Leaf2Example/

My Demo

I have used jquery.transit to write my own version of the falling leaves demo using both frame & CSS animation with the following enhancements:

  • The leaves are Images rather than graphics.
  • Jquery.transit is used to scale and rotate the leaves in their x & y axis
  • A random wind force affects the speed the leaves spin & scale on their x & y axis and how fast they move position.

The demo animates fifty leaves made up of 6 different leaf designs:

View Demo page

You can download the source code here...

blog comments powered by Disqus

Image attribution: "Autumn Leaves" by blmiers2 is licensed under CC BY 2.0

About Me

My first computer was a Commodore VIC-20, I had great fun trying to code text adventures and side scrolling shoot ‘em ups in BASIC. This helped me lead the way as the first in my school to pass a computer exam.

Currently I work as a Senior Software Engineer in Bedford for a FTSE 100 Company. Coding daily in C#, JavaScript and SQL. Outside of work I work on whatever is interesting me at that time.