CSS Animations
More abusable than transitions. Not as robust as transitions – the state won't change at all as opposed to transition, where the state does change but without the animation.
Keyframes:
Syntax:
.animated-thing {
animation: black-to-white 1s linear 1;
}
@keyframes black-to-white {
0% { background: #000; }
100% { background: #fff; }
}
The last number on line#2 (1
) is how many times you want the animation to run.
.animated-thing {
animation:
$name
$duration
$timing-function (optional)
$animation-delay (optional)
$iteration-count (optional);
}
Long form animation properties
animation-name
: The name of the keyframe block you want to useanimation-duration
: how long it will take from 0% to 100%animation-iteration-count
: the number of times you want to from 0% to 100%. you can useinfinite
animation-timing-function
: same as for transitionsanimation-delay
: same
@keyframes black-to-white {
0% {
background: #000;
color: #fff;
}
100% {
background: #fff;
color: #000;
}
}
or use from
and to
@keyframes black-to-white {
from {
background: #000;
color: #fff;
}
to {
background: #fff;
color: #000;
}
}
with percentages you can do for example:
@keyframes black-to-white {
0%, 100% {
background: #000;
color: #fff;
}
50% {
background: #fff;
color: #000;
}
}
Multiple animations
.animated-thing {
animation:
black-to-white 1s linear 1,
black-to-red 2s ease-out infinite 2s;
}