CSS Animation - animation Properties & keyframe Rules

Animation

We can create animation in webpages or websites using CSS properties.There are several CSS animation properties. We will learn about each property and we can also use a short hand animation property.We will discuss that too.

@keyframes Rule

@keyframes is used to control the animation.They control the movement of animation.We can apply any kind of animation using this rule.

Syntax:

@keyframes animationName{

from{ propertyName: value;}

to {propertyName: value;}

}

Example:

The animation-name property

This property is used to specify the name of animation.

Example:  Lets say we have div element and we want to add animation to it.Then we will write following code,

The animation-duration Property

This property is used to define duration time of animation.It tells how long the animation will run.It can have three values: 

1. time: specified in seconds by developer like 5s,2s,3s etc
2. initial: Set property to its default value.
3. inherit: inherits value of property from parent element.

Example: 

The animation-timing-function property

This property is used to set the speed of animation.It can set the animation speed from slow to fast but does it using several values. We can pass following values in it.

1. linear: Animation has same speed from beginning to ending.
2. ease: This is the default values. Animation speed changes.Animation starts slowly then fast and then again slow at the ending.
3. ease-in: Animation has a slow start.
4. ease-out: Animation has a slow end.
5. ease-in-out: Animation has both slow start and slow end.
6. steps(interval, start||end): This is a function to specifies the speed. First parameter is interval that must be positive integer greater than 0. Second parameter is value start or end.By default it is set to end.
7. cubic-bezier(n,n,n,n): This is another function to define values of timing.It takes 4 parameters and each can contain value ranging from 0 to 1.
8. step-start: equivalent to steps(1,start)
9. step-end: equivalent to steps(1,end)
10. initial: Set property to its default value.
11. inherit: inherits value of property from parent element.

Example:

The animation-delay Property

This property is used to delay animation for some seconds or time. It makes the animation pause for specified time.Animation plays as it has been already played for some seconds.Like animation-duration property it also takes three values:

1. time: specified in seconds by developer like 5s,2s,3s etc
2. initial: Set property to its default value.
3. inherit: inherits value of property from parent element.

It can take both positive and negative values.

Example:

The animation-iteration-count Property

This property specifies how many times animation will play.Just like a loop count variable. If we give 10 as value.Animation will play for 10 times.

It can take following values:

1. number: It can take any number like 3,5,10. Default value is 1.
2. infinite: Animation will play for infinite times.It will play till infinity.
3. initial: Set property to its default value.
4. inherit: inherits value of property from parent element.

Example:

The animation-direction Property

It is used to set the direction of animation.We can define whether animation will go forward or backwards.

It can take 6 values:

1. normal: It is default value.It moves animation in forward direction (left to right).
2. reverse: It moves animation in backward direction(right to left).
3. alternate: It moves animation n forward direction first, then backwards.
4. alternate-reverse: Animation moves backward first, then forward.
5. initial: Set property to its default value.
6. inherit: Inherits value of property from parent element.

Example: 

The animation-fill-mode Property

The animation-fill-mode property sets how a CSS animation applies styles to its target before and after its execution.It can set the style of element when animation is not playing.

It takes 6 values:

1. none: It is default value.No style is applied to animation before or after playing.
2. forwards: The element will retain the style set by last keyframe.
3. backwards: The element will retain the style set by first keyframe.
4. both: Animation will follow the rules of both forward and backward.
5. initial: Set property to its default value.
6. inherit: inherits value of property from parent element.

Example:

The animation-play-state Property

This property specifies whether the animation is running or paused.It can be used to pause the animation during play.

It takes four values:

1. running: It is the default value. It is used to specify that the animation is running.
2. paused: This is used to pause the animation.
3. initial: Set property to its default value.
4. inherit: inherits value of property from parent element.

Example:

Lets see the working of these properties together and make a animation in Brackets using them.

Animation Example: 

Click on View> Vertical split to see both the files together in Brackets like as shown below,

Output: To check output, first click on html file then on Live preview icon highlighted with yellow color here. Play the video to see output.

The animation Property

It is the shorthand animation property for creating animation in CSS. We need not to write such a lengthy code. This this best way to define animation.You can add as all properties to it.

Syntax:

animation: animName  animDur  animIterationCount animDirection;

Example: 

Animation Example: 

This will demonstrate the animation of changing backgrounds colors of two div elements in normal and reverse direction for infinite  times using shorthand animation property. Animation duration is 5s .

Output:  Play the video to see output.

If you like the post do comment.Happy Coding!