DEV Community

loading...
Cover image for CSS Animation: translate3d, backdrop-filter and custom tags

CSS Animation: translate3d, backdrop-filter and custom tags

astrit profile image Astrit Updated on ・1 min read

Hello everyone,

On this tutorial we are going to learn on how to create a smooth animation using CSS transform translate3d prop, why to use cubic-bezier transition timing function and its benefits.

How and why to use custom tags. And if you watch the video by the end I also did a bonus tip using backdrop-filter to have some frost/blur style on background.

Topics:

  1. Why and how to use the 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://codepen.io/astrit/pen/KKMjZEz

Links:
https://github.com/astrit​
https://twitter.com/astritmalsija​
https://codepen.io/astrit

Discussion (2)

pic
Editor guide
Collapse
inhuofficial profile image
InHuOfficial

404 on your codepen bud, just thought I would let you know.

Collapse
astrit profile image
Astrit Author

Oh thank you very much bro just changed it I did not know is was 404.

Thanks