The daily developer
Posted on February 3, 2023
You might've already come across animation on a website you previously visited and probably wondered how was it done.
Some animation require the use of javascript which we will get to in a later post but first let's discuss how to animate in CSS.
What is animation?
An animation is the gradual transition of an element's style to another using properties that sets the looks that the element will have at particular times.
How is animation done ?
In order for an animation to work it must first be connected to an element.
| Property | function | value |
|---|---|---|
animation-delay |
defines the delay of the start time of the animation. | takes a value in seconds such as 2s
|
animation-direction |
defines if an animation is to be played forward or backward or even in cycles |
normal, reverse,alternate, alternate-reverse
|
animation-duration |
indicates how long should the animation last | takes a value in seconds such as 5s
|
animation-fill-mode |
indicates how the element looks before and after it is applied |
none, forwards, backwards, both
|
animation-iteration-count |
indicates how many times the animation should be played | takes either a number or the value infinite
|
animation-name |
defines a name that is used to select the @keyframes rule that specifies the animation |
none or custom-name
|
animation-play-state |
indicates whether to play or pause the animation |
paused, running
|
animation-timing-function |
determines how an animation develops over the course of each cycle |
ease, ease-in, ease-out, ease-in-out, linear
|
Let's discuss animation-fill-mode and animation-timing-function's property values
animation-fill-mode:
forwardswill allow the element to keep the style values that were set by the last keyframe.backwardswill allow the element to get the styles set by the first keyframe and keep it during the delay period.bothThe animation will follow rules for both forward and backward motion.
animation-timing-function:
linearallows the animation to retain the same speed from start to end.easeallows the animation to start slow then speed up before ending slowly.ease-inallows the animation to start slowlyease-in-outallows the animation to have a slow start and end.ease-outallows the animation to have a slow end.
Syntax
div {
property: value;
property: value;
animation-name: example;
animation-duration: 2s;
}
@keyframes example {
from { property: value}
to { property: value}
}
Posted on February 3, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
