DEV Community

Cover image for Advanced CSS Animation Using cubic-bezier()

Advanced CSS Animation Using cubic-bezier()

Temani Afif on May 19, 2021

When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of trick...
Collapse
 
thormeier profile image
Pascal Thormeier •

What a deep-dive, awesome article! Thank you for that one!

If I may add a suggestion: to make the maths part a bit more readable, the editor allows for KaTeX using liquid tags, so you can format the formulas in well-known notations, such as fractions, subscripts, superscripts, sum signs (capital sigma), etc.

Collapse
 
afif profile image
Temani Afif Playful Programming •

thanks for the tip, now the article looks a lot better 👍

Collapse
 
thormeier profile image
Pascal Thormeier •

Love it, thank you again for the great article 😀

Collapse
 
afif profile image
Temani Afif Playful Programming •

Oh we have math here, thanks god! will edit right now ... it wasn't the case on CSS-tricks 😔

Collapse
 
icecoffee profile image
Atulit Anand •

Lol to all those people who ones assumed, front end don't require any math.
haha

Collapse
 
afif profile image
Temani Afif Playful Programming •

Front end require math and geometry ;) (like I am doing here: dev.to/afif/fully-responsive-css-f... and here: dev.to/afif/responsive-hexagon-gri...) and more Math-related posts are coming ;)

Collapse
 
icecoffee profile image
Atulit Anand •

Looking forward to it

Collapse
 
icecoffee profile image
Atulit Anand •

State of the art work.

Collapse
 
madza profile image
Madza • • Edited

Are you aware of 3Blue1Brown?
One of my fav YouTubers on awesome topics like these 👌💯

Collapse
 
afif profile image
Temani Afif Playful Programming •

not really, my engineer days are behind me now but might be good to refresh my memory 😉

Collapse
 
madza profile image
Madza •

Also the opensource animation engine he uses manim 🔥😉

Collapse
 
grahamthedev profile image
GrahamTheDev •

Another great article!

Just commenting for the algorithm 😜

Collapse
 
arsalan0974 profile image
arsalan0974 •

Awesome very nice

Collapse
 
__manucodes profile image
manu •

Nice math :D .
haha usually I use cubic-bezier.com because it takes much less time.

Yes, I also know desmos.. I use it for my assignments ;)

Collapse
 
gusgonnet profile image
Gustavo •

wow, who says that advanced CSS tricks are not rocket science.
thank you for the deep dive
Gustavo.

Collapse
 
nikhil27b profile image
Nikhil Bobade •

Great Article bro

Collapse
 
goodnewsdaniel profile image
Goodnews Daniel •

This article makes me feel I don't know any CSS at all! It's scary :))