Animation Timing-Functions Get Applied Per-Keyframe In CSS
A couple of weeks ago, I looked at creating a simple slide-show using dynamic keyframe animations in Angular 10.0.9. In the video for that demo, I mentioned that my approach was somewhat limited because the timing-function wasn't granular enough. As it turns out, my assumption of granularity was completely wrong. In fact, as I just learned from Una Kravets on the Animations episode of the CSS Podcast, the animation-timing-function property is applied on a per-keyframe basis. To help correct my poor mental model, I put together a small demo showcasing this per-keyframe granularity.
Run this demo in my JavaScript Demos project on GitHub.
View this code in my JavaScript Demos project on GitHub.
To demonstrate that the animation-timing-function within a CSS animation is applied on a per-keyframe basis, I am going to use cubic-bezier() function that moves a dot across the screen with a sort-of "bouncing" effect. This way, we can see that the dot "bounces" beyond the bounds of each keyframe configuration - not just beyonds the bounds the overall animation.
In the following CSS animation, the dot will rest at about 1/3 the horizontal distance; then again at about 2/3 the horizontal distance. At each resting point, we should see the cubic-bezier() animation-timing-function "bounce" the dot beyond the target left setting.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
Animation Timing-Functions Get Applied Per-Keyframe In CSS
</title>
</head>
<body>
<h1>
Animation Timing-Functions Get Applied Per-Keyframe In CSS
</h1>
<style type="text/css">
.track {
border: 1px solid red ;
border-radius: 100px ;
height: 100px ;
position: relative ;
}
.marker {
background-color: red ;
bottom: 0px ;
position: absolute ;
top: 0px ;
width: 1px ;
}
.dot {
background-color: #212121 ;
border-radius: 80px ;
height: 80px ;
left: 10px ;
position: absolute ;
top: 10px ;
width: 80px ;
z-index: 2 ;
/*
In order to demonstrate that the timing-function executes per-keyframe,
I'm going to use an exaggerated cubic-bezier configuration that "bounces"
the dot past the final "left" value of each keyframe.
*/
animation-direction: alternate ;
animation-duration: 10s ;
animation-iteration-count: infinite ;
animation-name: box-animation ;
animation-timing-function: cubic-bezier( .55, -0.64, .42, 1.63 ) ;
}
@keyframes box-animation {
from, 5% {
left: 10px ;
}
25%, 40% {
left: 30% ;
}
60%, 75% {
left: 70% ;
}
95%, to {
left: calc( 100% - 90px ) ;
}
}
</style>
<div class="track">
<div class="dot">
<br />
</div>
<!-- These markers help show the movement of the dot. -->
<div class="marker" style="left: calc( 30% + 40px ) ;"></div>
<div class="marker" style="left: calc( 70% + 40px ) ;"></div>
</div>
</body>
</html>
And, when we run this CSS animation in the browser, we get the following output:
As you can see, the dot "bounces" beyond the target left alignment of each CSS keyframe. That's because the animation-timing-function is being applied on a per-keyframe basis - not to the entire animation life-span. This is a small but critical difference in how keyframe animations work. And now, hopefully, I'll remember this going forward.
Want to use code from this post? Check out the license.
Reader Comments
@All,
As a fast-follow to this post, I wanted to demonstrate that CSS Animation timing-functions can actually be changed per-keyframe:
www.bennadel.com/blog/3886-animation-timing-functions-can-be-changed-per-keyframe-in-css.htm
That's actually the piece of information that Una mentioned in the CSS Podcast - that the
animation-timing-functioncan be overridden within a key-frame; which, in turn, led me to understand that the timing-function is also applied per-keyframe as well. Overall, it seems that CSS Animations are just a lot more powerful and dynamic than I had given them credit for.