Jason Robitaille รีทวีตแล้ว
CSS Tip! ✨
You can create icon sprite animations using the steps() animation-timing function 🤙
You could use this to create little icon button animations, etc. 😎
But how do you do it? Like this 👇
button img {
object-fit: cover;
object-position: 0 0;
}
The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this:
[aria-pressed=true] img {
animation: play 0.5s steps(20) forwards;
}
@ keyframes play {
to {
object-position: 100% 0;
}
}
We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite 🎉
Check out the video that breaks things down a little bit
@CodePen link blow! 👇
Andreas Storm@avstorm
Love this little CSS steps trick for animations
English
