CSS Animation: translate3d, backdrop-filter, and Custom Tags
Learn how to create a smooth animation using the CSS transform translate3d prop, as well as why we use cubic-bezier transition timing function and its benefits.
Hello everyone.
In this tutorial, we are going to learn:
- how to create a smooth animation using the CSS transform translate3d prop.
- why we'd want to use the cubic-bezier transition timing function and this function's benefits.
- how and why we use custom tags.
- if you watch the video to the end, I also provide a bonus tip on using
backdrop-filterto style some frost/blur style on background.
Topics:
- Why and how to use translate3d.
- Why and how to use cubic-bezier.
- Using custom tags.
- Apply color by using
currentColor. - Using
backdrop-filter.
Don't forget to subscribe!
Source: https://github.com/astrit/youtube
Demos:
- Blackhole: https://cdpn.io/KKMjZEz
Links:
CSS
Published at DZone with permission of Asrit Malsija. See the original article here.
Opinions expressed by DZone contributors are their own.