CSS animations
Animations
Complex keyframe-based animations that can autoplay
- Combination of two things:
@keyframesblockanimationproperty
@keyframes
- Defines each change to CSS properties over time
- Multiple different keyframes for every animation
- Defined in percentages—allowing the animation time-length to be variable
CSS
@keyframes rainbow-y-fade-y-thing-y {
0% {
background-color: red;
}
50% {
background-color: orange;
}
100% {
background-color: yellow;
}
}
animation
- Connects a specific set of
@keyframesto an element - Controls how the keyframes are played: time, direction, iterations, etc.
CSS
.box {
animation: rainbow-y-fade-y-thing-y 2s linear;
}
HTML
<div class="purple"></div>
.purple {
transform-origin: right bottom;
animation: spin 1s infinite alternate;
}
@keyframes spin {
/* Markbot won’t like this spacing; */
/* it’s compressed to fit on the screen */
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
