Web Animation can be used to attract attention, engage people better, and communicate more clearly and effectively. It can engage and hold people's attention longer than just a static web page.
The @keyframes rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change form the current style to the new style at certain times.
The animation is specified by using two types keywords: from - to and 0% - 100%.
NOTE: By using per cent, you can add as many style changes as you like, For Example On(0%,20%,40%,80% and 100%).
Example
To get an animation to work, you must bind the animation to an element.
.content{
width: 100px;
height: 100px;
color: orange;
animation-name: false;
animation-duration: 0.3s;
}
@keyframes fade {
from{ opacity: 0; }
to{ opacity: 1; }
}
If the animation-duration property is not specified, no animation will occur, because the default value is 0s.
Delay an Animation
The animation-delay property specifies a delay for the start of an animation
Iteration an Animation
The animation-iteration-count property specifies the number of times an animation should run.
Direction an Animation
The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.
The animation-direction property can have the following:
- normal - default
- reverse - The animation is played in reverse direction(backwards)
- alternate - The animation is played forwards first, then backwards
- alternate-reverse - The animation is played backwards first, then forwards
Specify the speed curve of the Animation
The animation-timing-function property specifies the speed curve of the animation.
The animation-timing-function property can have the following values:
- ease - Slow start, then fast, then end slowly (default)
- linear - Same speed from start to end
- ease-in - slow start
- ease-out - Slow end
- ease-in-out - Slow start and end
- cubicbezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function.
Specify the fill-mode for an animation
Animation does not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property is used to override this behaviour.
The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts after it ends, or both)
- none - Animation will not apply any styles
- forwards - The element will retain the style values that are set by the last keyframe
- backwards - The element will retain style values that are set by the first keyframe
- both - Retain style from first and last both.
Animation shorthand property
.content{
width: 100px;
height: 100px;
color: orange;
/*animation: name duration timing-function delay iteration-count direction filll-mode*/
animation: fade 0.3s ease 1s 1 reverse forwards;
}
⌛ Thanks For Reading | Happy Coding 🍵