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
<styletype="text/css">h3{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;}@keyframesanimate-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;}50%{color:blue;left:200px;top:0px;border-bottom:3px dashed blue;}75%{color:green;right:100px;top:50px;border-right:3px dashed green;}100%{color:red;left:0px;top:0px;border-radius:20px;}}</style>
<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
linear
This value is used to keep the speed of same from start to end.
ease
This is basically default value of animation.This starts slow, run fast and
then become slow at the end.
ease-in
This value is used for starts slow and then speed up.
ease-out
This value is used for starts fast and then slow down.
ease-in-out
This value is basically very similar to ease value, it starts slowly
and then fast.
cubic-bezier(#,#,#,#)
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.
