CSS Animation

Repeating Tile Background Animation in CSS

Submitted by GeePee on Tue, 09/16/2014 - 01:13

This project will teach you on how to animate a repeating tile background using CSS keyframes. Using the css keyframes, tiled images will animate like a falling snow as seen on my example. It is depend on your style if you want to animate it from the right. Feel free to modify this project according to your preference. Hope you learn from this.

Floating Object Animation Using CSS

Submitted by GeePee on Sat, 09/13/2014 - 13:39

This project will teach you on how to animate object with a floating effect using CSS keyframes. In my example, I have a background image of a levitating man. Using the @keyframes, the man moves like he is really floating. Then the shadow below suddenly fades as the man comes up. Hope you learn from this.

How to Create a Moving Website Background Using CSS Only

Submitted by argie on Sat, 11/30/2013 - 11:19

This tutorial will teach you on how to create a moving background image using only CSS. I uses @keyframes rules i this tutorial to animate the background. To understand more about this rule, let me provide the definition and usage of this rule. with the @keyframes rule, you can create animations. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times. Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.

Subscribe to CSS Animation