Elastic easing in CSS3, best approach

前端 未结 2 1674
既然无缘
既然无缘 2020-12-14 09:37

I\'d like to emulate an elastic easing function in CSS3. CSS3 does not support this natively, so I\'ve been coming up with my own keyframes, and it looks okay, but

2条回答
  •  醉话见心
    2020-12-14 09:46

    Depending on your browser limitations (and if you're using CSS3 you should be ok regardless), you can actually apply easing transitions with the cubic-bezier() keyword instead.

    An example animation would look like this:

    transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
    transition-duration: 2.9s;
    

    Lea Verou's blog post covers this pretty well.

提交回复
热议问题