CSS3 Animation Examples using Keyframe and its Properties

As you know in the early age of web programming generally we generally do animation using JavaScript, Jquery or Flash. But these methods are having some limitation. Using JavaScript or Jquery it is required that Client machine need to allow Scripts to run. Similarly using Flash animations frames are not SEO friendly. These problems are addressed in CSS3 animation. Compare to JavaScript & Flash animation CSS3 animation results better performance. To get started with CSS3 animation look at the below CSS3 Animation Examples.

Examples.htm

<!DOCTYPE html>
<html>
<title>CSS3 Animation Examples using Keyframe</title>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: green;
-webkit-animation-name: animationDemo; /* for Google Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* for Google Chrome, Safari, Opera */
animation-name: animationDemo;
animation-duration: 4s;
}

/* Syntax for Chrome, Safari, Opera */
@-webkit-keyframes animationDemo {
from {background-color: green;}
to {background-color: red;}
}

/* Standard browser syntax */
@keyframes animationDemo {
from {background-color: green;}
to {background-color: red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

In the above block of code I did a small animation using CSS3. I have a div in my HTML page. Initially it has its background color green. Later using CSS3 @keyframes I am updating background color to red. To apply @keyframe on my div I added the animation-name “animationDemo”. Then followed by @keyframes I am assigning From & To properties of animationDemo class. In From block I declared the initial state as background color green. Then in To block I am updating background color to red. This example is for demo purpose. Using From & To properties of @keyframes you can implement any kind of animation in CSS3.

List of CSS3 Animation Properties

To know more about CSS3 Animation here in below I am describing all its properties. Starting from Animation direction to Speed of animation these properties will help you.

Properties Description
@keyframes @Keyframe comes with From & To parts. To do an animation in this block we can specify the required CSS. From generally contains the default state. Where To contains the final state of animation.
animation A shorthand property for setting all the animation properties.
animation-delay Some time we required some interval to start animation. For an example after successful submission I want to show a green flag in my page. In this case using animation-delay property we can specifies the interval to start the animation. The default value for this property is 0.
animation-direction Animation can occur in any direction. It can be top to bottom or left to right. In case you want reverse, I mean bottom to top or right to left this property helps. Using animation-direction property we can reverse direction or alternate cycles of an animation. Animation direction comes with the following properties normal, reverse, alternate, alternate-reverse, initial & inherit. To know more about these properties you can refer animation-direction properties.
animation-duration An animation can be a single cycle or can be repeated cycle. Using animation-duration you can defines how many seconds or milliseconds an animation takes to complete one cycle.
animation-fill-mode In case some where you want to stop your animation in this case animation-fill-mode works. This property help to specify a specific style for the element when the animation is not playing.
animation-iteration-count In case you want you animation need to repeat for certain number of time in this case you can use this property. Here if you specify the number of times an animation need to play, that animation will repeat this much time.
animation-name Defines the name of animation. Which we use for @keyframes.
animation-play-state Assume in your animation you want to provide pause button. I mean in between the animation you want to give a facility to the customer that he can pause the animation in any point of time. For this case animation-play-state property is useful. Using this property you can define whether the animation is running or paused.
animation-timing-function Specifies the speed curve of the animation.