CSS Animation: translate3d, backdrop-filter, and Custom Tags

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-filter to style some frost/blur style on background. 

Topics: 

1. Why and how to use translate3d. 
2. Why and how to use cubic-bezier. 
3. Using custom tags. 
4. Apply color by using currentColor.
5. Using backdrop-filter. 

Don't forget to subscribe!

Source: https://github.com/astrit/youtube 

Demos: 

• Blackhole: https://cdpn.io/KKMjZEz 

Links: 

• https://github.com/astrit 
• https://twitter.com/astritmalsija 
• https://codepen.io/astrit