HTML and CSS Reference
In-Depth Information
Spritesheet using CSS3 animation
In the CSS keyframe animaion, the browser interpolates the value of the property within the
speciied duraion. This secion explains how we set the interpolaion as a stepping value.
The
steps
funcion allows the animaion to be played in frames. The following igure
explains how the interpolated values are evenly divided. After dividing the CSS into steps,
we have two modes:
start
and
end
. The difference is whether the beginning or the
ending shows. This is shown in the following figure where the x axis is the keyframe's
raio, from 0.0 to 1.0:
output ratio
output ratio
1.0
1.0
0.5
0.5
time ratio
time ratio
0.5
1.0
0.5
1.0
0
0
steps (2, start)
steps (2, end)
graph from Mozilla Developer Network
Please ind the deiniion in the following Mozilla documentaion:
https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#The_
steps()_class_of_timing-functions
Changing the animation speed
The running loop gradually gets faster. We want to reflect this in the player's running
animaion too. Therefore, we decrease the animaion duraion gradually, and thus make
the animaion appear faster.
Classified intel
In the console, we can inspect an element's style property to know the property name
for a specific style. Some non-stable styles may have the vendor prefix appended such as
webkitAnimationDuration
.
