When applying animations to various CSS elements you must state some keyframes for the animation. The @keyframes rule specifies that an element will change its present style to the one specified at particular times. Moreover, you have to attach an animation to a particular element for the animation to work.
There are various CSS animation properties that are used for the purpose of adding animations to various CSS elements, we have discussed these properties below.
CSS Animation Properties
CSS provides various animation properties which are explained in detail below.
animation-name
This property is used to define a name for the @keyframes.
Syntax
The keyframename parameter defines a name for the keyframe that you desire to attach to an element.
Example
Consider the example below to understand how this property works.
HTML
Here we have defined a <p> element on which we will apply the animation effect.
CSS
font-size: 30px;
position: relative;
animation-name: animation;
animation-duration: 5s;
}
@keyframes animation {
from {left: 0px;}
to {left: 200px;}
}
Before applying the animation effect we have first set the font size, and position of the paragraph. Later, we have assigned the keyframes a name and using the @keyframes rule, we are defining that the animation will make the paragraph move from 0px to 200px from the left.
Note that it is important to set the animation duration otherwise it will not work.
Output
The animation is working properly.
animation-duration
This property defines the time an animation should take to finish one cycle.
Syntax
The time parameter defines the time of the animation.
Example
Here is how you can set the duration of an animation.
HTML
We have simply defined a div element.
CSS
width: 100px;
height: 100px;
background-color: brown;
position: relative;
animation-name: animation;
animation-duration: 3s;
}
@keyframes animation {
from {left: 0px;}
to {left: 200px;}
}
Apart from styling the div container, we have set the animation duration to 3 sec. This means that the animation will continue to play for 3 seconds.
Output
The animation is being played for 3 seconds.
animation-delay
This property defines the waiting period before the animation begins.
Syntax
The time parameter defines the waiting time before the animation starts, however, it is optional.
Example
Suppose you want to delay your animation for 2 seconds then follow the code below.
CSS
width: 100px;
height: 100px;
background-color: brown;
position: relative;
animation-name: animation;
animation-duration: 5s;
animation-delay: 2s;
}
@keyframes animation {
from {left: 0px;}
to {left: 200px;}
}
The above code specifies that the div container will move from 0px to 200px from the left for 5 seconds after a waiting period of 2 seconds.
Output
The animation was delayed for 2 seconds and then started as desired.
animation-timing-function
This property defines the acceleration curve of the animation.
Syntax
All the parameters are explained below.
- ease: The animation occurs in a slow-fast-slow fashion.
- linear: The animation will have the same speed from starting to end.
- ease-in: The animation will have a slow beginning.
- ease-out: The animation will have a slow ending.
- ease-in-out: The animation will have a slow beginning as well as a slow end.
- cubic-bezier (n,n,n,n): The values of the animation will be set in a cubic-bezier manner.
Example
The example below shows the ease parameter of the property under discussion.
CSS
animation-name: animation;
animation-duration: 5s;
animation-timing-function: ease;
}
@keyframes animation {
from {left: 0px;}
to {left: 200px;}
}
We have set the value of the animation-timing-function to ease, therefore, the animation will occur in a slow-fast-slow manner.
Output
The animation is playing in a slow-fast-slow fashion.
animation-iteration-count
This property defines how many times an animation will play.
Syntax
The number parameter defines the number of times an animation will be played, meanwhile, the infinite parameter defines that the animation will play infinitely.
Example
Let’s understand the working of the animation-iteration-count property using the following example.
CSS
animation-name: animation;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes animation {
from {top: 0px;}
to {top: 100px;}
}
The code above defines that the animation will make the div container move from 0px to 100px from the top for 5 seconds twice.
Output
The animation is being played twice as specified in the code.
animation-direction
This property defines the direction in which the animation will move. Directions can be forward, backward, or switch between both.
Syntax
All the parameters are explained below.
- normal: This is a default parameter that plays the animation forwards.
- reverse: This parameter plays the animation in the reverse direction.
- alternate: This parameter plays the animation first in the forward direction, and then in the reverse direction.
- alternate-reverse: This parameter plays the animation first in the reverse direction and then the forward direction.
Example
The example below demonstrates the alternate-reverse parameter of the animation-direction property.
HTML
We have created a heading.
CSS
color: brown;
position: relative;
animation-name: animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
@keyframes animation {
from {left: 0px; color: brown;}
to {left: 100px; color: yellow;}
}
The above code states that the heading will move infinitely for 3 seconds from 0px to 100px from the left in an alternate-reverse fashion switching between the colors brown and yellow.
Output
The animation-direction property was implemented successfully.
animation-fill-mode
This property defines the style of an element at the time when the animation is not playing. This means what style the element will have either before the animation begins, after it finishes, or both.
Syntax
All the parameters are explained below.
- none: This is a default parameter that gives style to the element either before or after the animation occurs.
- forwards: This parameter keeps the style of an element defined by the last keyframe.
- backwards: This parameter keeps the style of an element defined by the first keyframe and holds on to this style during the delay time of the animation.
- both: This parameter switches between the forwards and backwards parameters.
Example
Let’s see how the forwards parameter works by following the example below.
HTML
We have simply created a div container.
CSS
width: 100px;
height: 100px;
background-color: brown;
position: relative;
animation-name: animation;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes animation {
from {left: 0px;}
to {left: 100px; background-color: yellow;}
}
In the above code, we have set the animation-fill-mode property to forwards parameter, therefore, the div container will retain the style specified in the last keyframe when the animation is stoppped and not playing.
Output
The div container has a yellow background color when animation is stopped and not playing.
animation-play-state
This property defines if the animation is executing or paused.
Syntax
The running parameter is a default value that specifies that animation is executing, meanwhile the paused parameter specifies that the animation is paused.
Example
Suppose you want to pause an animation using the animation-play-state property. Here is how you do it.
CSS
animation-name: animation;
animation-duration: 3s;
animation-play-state: paused;
}
@keyframes animation {
from {left: 0px;}
to {left: 100px;}
}
The above code specifies that the animation will be paused.
Output
The animation was paused successfully.
animation
This property is a shorthand property for all of the above properties.
Syntax
Example
Consider the example below to understand the animation property.
CSS
animation: animation 3s infinite alternate;
}
@keyframes animation {
from {left: 0px; background-color: brown;}
to {left: 200px; background-color: yellow;}
}
We are specifying that the animation will play infinitely for 3 seconds in an alternate fashion.
Output
The animation property is working properly.
Conclusion
Animations are referred to as a gradual change in the style of an element. CSS provides various animation properties which are as follows: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation. All of these properties are used to specify the behavior of the animation effect being applied on various HTML elements. In this guide, all of these properties are explained with the help of relevant examples.
from https://ift.tt/D1OfV80
0 Comments