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
✅ The CSS challenge video: • I've been challenged to solve a CSS r...
✅ More on prefers-reduced-motion: • 3 super small changes to improve your...
✅ More information on @property on the MDN: https://developer.mozilla.org/en-US/d...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - https://code.visualstudio.com/
---
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.
Twitter: / kevinjpowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Watch video 10 CSS animation tips and tricks online without registration, duration hours minute second in high quality. This video was added by user Kevin Powell 06 April 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 178,32 once and liked it 6.4 thousand people.