With help of css Animation we can make our UI more attractive and user friendly. In this Blog we are going explore all the properties of css animation with example explaination.
animation-name : widthIncrease
animation-duration : 1s
animation-iteration-count : 1s
animation-delay : 2s
animation-timing-function : linear
@keyframes widthIncrease {
from { width: 6rem; }
to { width: 20rem; }
}
animation-name
According to css animation rules we have to give a animation-name so we can use this name next time for animation
animation-duration
animation-duration is time value in seconds (exa = 2s, 3s,) which takes to complete to animation.
animation-iteration-count
animation-iteration-count is like how many times we want the animation repeat we can give it value
1, 2, 3 ... or infinite
etc.animation-delay
As Its name animation delay is time in which time animation not start value = 1s, 2s, ...
animation-timing-function
animation-timing-function is speed to complete animation values = linear, ease, ease-in, ease-out, ease-in-out, step-end, step-start, cubic-bezier