10 CSS animation tips and tricks

CSS transitions and animations can be a lot of fun, and there are so many neat tips and tricks you can do with them!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:43 - Different timing functions for different states
02:23 - The order of keyframe animations doesn’t matter
04:00 - Declaring multiple keyframes with one declaration
05:05 - Omiting 0% and 100%
06:10 - Animating transform and the individual transform properties
07:52 - Using negative animation delays
10:08 - prefers-reduced-motion
12:44 - Using the same animation multiple times within one declaration
15:05 - Using @property to animate custom properties

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[DampeSN]

An animation technique I don't often see is what I call The Poof. Very simple: transition to a big-ass blur, opacity to 0 and scale up. Add in a skew and a translation in a direction for extra flair. Looks like the element disappears in a puff of smoke. I'm sure you can think of situations where this would be appropriate and satisfying. The reverse is also pretty impressive.

[gykonik]

Awesome information in that video! Maybe you could consider doing some sort of series "How CSS works under the hood"? In previous videos, ou mentioned some things like "CSS parses the selectors from right to left" and stuff that I didn't know before. Moreover, I think many of us have no clue how CSS really works, and just know how to use it. (And you could build upon that series by another series about optimization :D)

Would love to see something like that! 😊

[Cipscis]

Another animation/transtion trick I find really useful is that the visibility property can be animated. This can be useful for accessibility, since if you're doing something like animating an element's height to or from 0, you should be making it visibility hidden when it's collapsed so the user can't do stuff like tab into the hidden area with their keyboard focus.

Because the visibility property has discrete values, they will flip at the midpoint of a transition or animation. But with animations you can "fix" this by putting two keyframes at the same point, so that midpoint is also at that point.

But you can set up an animation with the same visibility value at 0% and 100%, so once the animation is over it will fall back to the value set directly on an element. That way, when you're hiding an element you can set its visibility to hidden, but give it a "stayVisible" animation to delay that value changing until your other animation or transition is complete.

Of course this is all easy to do with JavaScript, but it's nice to know you can do it all right in your CSS instead.

[BigSmoke-rw]

Great advice from the CSS King! Thank you good sir.

[nikolitilden]

Your content is so freaking good man. Thank you for all the help you do for the community!

[johnKeysCloudSonics]

your passion for this is so evident. very inspiring stuff! thank you!

[Technophle]

8:30 If you want this in CSS, there's another solution as well. We can use custom properties to achieve the same result:

```html
<div class="dot" style="--i: 0"></div>
<div class="dot" style="--i: 1"></div>
<div class="dot" style="--i: 2"></div>
```

```css
.dot {
animation-delay: calc(50ms * var(--i));
}
```

Basically, you don't declare custom properties in CSS, but rather in HTML with "indexing". Also, less code in your CSS. 🙂

[Citadelband]

Just a quick thanks! Your videos and quick tips and tricks have helped me understand how css works in a practical everday environment❤🎉

[alanbloom]

Fascinating concept about the transform rotate and the rotate counteracting each other…

[iranmine]

I really love the property idea, thats so nice like we can do lot of things with that, especially the gradient one
Hope it gets added in all browsers

[RonDro]

WE LOVE YOU KEVIN! You've taught me so much the last several years! Thank you!

[canarymultimedia]

Didn't know about prefers-reduced-motion and that it even is important for (simple) smooth scrolling, very interesting

[kohelet]

I didn't know all of the tips you gave us :) ! Thanks 😀 I really like when you give tips and informations about accessibility.

[czerskip]

Awesome! Let's mix the gradient backgrounds with animation in another episode 👏😁

[MegaClockworkDoc]

As usual, you exceed expectations. Thank you for putting this video together

[wlockuz]

19:08 Mind blown, this is a game changer!

[rickardelimaa]

19:05 - this can also be achieved by animating the background position, having the gradient be 200% of the button width (going from red to blue back to red again) and then translate it's position -100%.

[wlockuz]

As someone who comes from the native mobile world its always mind blowing how simple and elegant the web animation API is.

[CharlesSmall]

Thank you for the video Kevin. you are a master.

[outpost]

Kev your bonce needs a trim I thought you were about to topple over at one point 😂 Sorry it's my insane sense of humour :) Great vid as always.