Animation in CSS3

As transition is explained in previous chapter, the difference between a transition property an and animation property is, transition starts from one state to another while an animation allows the author to create more attractive keyframes. In this tutorial animation property will be explained. There are some example with easy and understandable values. Hope you will enjoy.

Explanation of the keyframes

In CSS3 basically animation has tow parts, 1: keyframes and 2: animation.
Here is an easy example to understand the use of keyframes.
@keyframes text {
0% { color: black; }
15% { color: blue; }
30% { color: grey; }
45% { color: yellow; }
60% { color: green; }
75% { color: purple; }
100% { color: orange; }

Adding animation properties

There are following properties in an animation are given below with short definitions.
1) animation-name
  For specify the name of animation.
2) animation-duration
  For specify the period of an animation.
3) animation-timing-function
  For specify the speed of an animation.
4) animation-delay
  For specify the delay in an animation.
5) animation-iteration-count
  For specify the repetition of an animation.
6) animation-direction
  For specify the direction of an animation.
7) animation-play-state
  To toggle an animation.
8) animation-fill-mode
  For specify the filling mode of an animation area.

Example of animation

<style type="text/css">

  width: 150px;
  height: 100px;
  color: red;
  position: relative;
  animation-name: animate-txt;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  text-shadow: 5px 10px lightgrey;
  text-align: center;
@keyframes animate-txt{
  0% { 
      color: red;
      left: 0px; 
      top: 0px;   
      border-top: 3px dashed red; 
      border-radius: 20px; 
  25% { 
      color: yellow;
      left: 100px;
      top: 50px;  
      border-left: 3px dashed yellow;
      color: blue;
      left: 200px;
      top: 0px;   
      border-bottom: 3px dashed blue;
      color: green;
      right: 100px;
      top: 50px; 
      border-right: 3px dashed green;
      color: red;
      left: 0px;
      top: 0px;   
      border-radius: 20px; 

<h3> Animated text. </h3>

Output of above code

Animated text.

Animation direction

This property is used to specify the direction of an animation.
There are following possible values for animation-direction
1) normal
2) alternate
3) alternate-reverse
4) reverse

The animation-timing-function property

This value is used to keep the speed of same from start to end.
This is basically default value of animation.This starts slow, run fast and then become slow at the end.
This value is used for starts slow and then speed up.
This value is used for starts fast and then slow down.
This value is basically very similar to ease value, it starts slowly and then fast.
This value is used to allow the user to specify the values.

The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.