Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
@keyframes: storyboard
For each animation, you need to define its name and describe the initial and final keyframes that are set using the from
and to
reserved keywords or 0%
and 100%
values.
You can also describe intermediate keyframes that are defined as percentage values.
If the initial keyframe is not defined, the animation is played from the element’s initial style state to the nearest step from the @keyframes
list and so on.
If the final frame is not defined, once the last intermediate step is reached, the animation will be played backwards until the element has reached its initial state.
Keyframes inside @keyframes
can be written in an arbitrary order, but it is recommended to list them chronologically in ascending order.
The duration of the animation, animation-duration
, is set in seconds or milliseconds, for example: 10s
, 100ms
.
Let’s now try to create an animation without describing the initial frame, using 50%
and 100%
steps.
- index.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Comments