Thanks for visiting DZone today,

Over 2 million developers have joined DZone.

Refcards Trend Reports

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

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.

By

Asrit Malsija

·

Feb. 18, 21 · Tutorial

Likes (2)

Comment

Save

4.8K Views

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:

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.

Comments