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.IO link blow! 👇show more

Here's that @CodePen link! 🚀 This was a bunch of fun to make. In fact, the hardest part was making the sprite 😂

Arguably one of the coolest parts about this sprite animation is using a CSS filter to change the color 😎 This is how the animation looks from the demo and we combine scale and filter to change the color and bump the icon size without editing the SVG itself 🤓 @ keyframes sprite-play { 75% { scale: 1.25; } 100% { opacity: 1; filter: invert(0.4) sepia(1) saturate(20) hue-rotate(140deg) brightness(1); object-position: 100% 0; } } @cassiecodes covers this technique really well in this @css article 👇

Nice tip, @jh3yy! Using a #lowcode platform such #orclAPEX, all we need is to add the CSS class “fa-anim-spin” and we’re all set 😎

The devil's in the details 😉 Can't spin this one as it's not a rounded shape. Been a while since I used "Font Awesome" though!

This is quite a neat trick! A possible solution for what we discussed this morning @Danoninho2222

@Danoninho2222 Thanks Joao 🤙 Wasn't sure if people would find it useful but I had some requests to break it down and this was the demo I rustled up for it 😁

Man, you're legit a great resource when it comes to the topic of CSS

@shalildev I try 😅 This legit wasn't what I planned on making this evening though. Ahh well 😅

In that particular example, an SVG animation would be smoother, no?

Depending on the approach with that route, it will require either path manipulation or you may be able to use stroke-dashoffset and marker come to think of it 🤔 Smoothness will partly come down to the SVG design too. If we go down the morph route, it likely means a JS dep