Transitions allows us to animate a single state change. Keyframes allow for much more complex multi-state animations
To use keyframes, create a @keyframes
rule with a name that is then used by the animation-name
property to match an animation to its keyframe declaration. Each @keyframes
rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe. Click [here] for MDN doc on @keyframes
.
Note in the code example below, the properties color & font-size are not the most performant and are used for demo only. In practice, you should replace font-size
with transition.scale()
for better performance (see here).
/* Define */
@keyframes animationName {
x%{
/* put your style here */
}
}
/* Apply */
selector {
animation-Name: animationName;
/* put other properties here */
}
@keyframes rainbowtext {
0%{
color:red;
font-size: 20px;
}
25%{
color:orange;
}
50% {
color:yellow;
font-size: 40px;
transform: translateX(200px);
}
75%{
color: green;
}
85%{
color: blue
}
100% {
color: purple;
font-size:20px;
}
}
p {
animation-name: rainbowtext; /* name declared in @keyframe*/
animation-duration: 3s;
animation-timing-function: linear; /* like transition */
animation-delay: 0s;
animation-iteraton-count: infinite;
}
How many times should it repeat? Click [here] for demo of Jiggle button
animation-iteration-count: 1;
/* Commonly used */
animation-iteration-count: infinite;
Allows you to have multiple directional effects on a single element. See demo [here] (note: for the demo to work, comment on line animation-play-state: paused;
)
animation-direction: forward;
animation-direction: reverse;
animation-direction: alternate;
Specifies how an animation should apply styles before and after the animation. Used this with animation-delay
. See demo
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
animation-fill-mode: none;
Specifies whether the animation is running or paused. Usually, you manipulate this property through Javascript. See demo [here]
animation-play-state: paused;
animation-play-state: running;
The order of values within each animation definition is important: the first value that can be parsed as a <time> is assigned to the animation-duration
, and the second one is assigned to animation-delay
.
The order within each animation definition is also important for distinguishing animation-name
values from other keywords.
animation: 3s ease-in 1s 2 reverse both paused slidein;
animation: changecolor 3s linear 1s infinite;
animation: jiggle 4s
Click <a href="https://codepen.io/Colt/pen/XaJWKz?editors=1100" target_blank>[here]</a> for a demo
Loading icon is the most common application of CSS keyframes. You can find more examples of loader [here]. Click [here] for the starter code. Click [here] for the completed code.
You can assign different colors to the borders of a box (border-top-color
border-bottom-color
). You can then turn the box into a circle using border.radius
.
.loader {
/* Turn box into circle */
margin auto;
border: 16px solid #bdc3c7;
width: 120px;
height: 120px;
border-top-color: #1abc9c
border-bottom-color: #3498db;
border-radius: 50%;
/* Animation shorthand */
animation: spin 2s linear infinite;
}
/* Animations Definition */
@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}