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
 
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

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
 
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

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

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

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

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
 
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
 
__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
 
arsalan0974 profile image
arsalan0974

Awesome very nice

Collapse
 
goodnewsdaniel profile image
Goodnews Daniel

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