如何在css变换动画中实现easeOutBack缓动 [英] How to implement easeOutBack easing in css transform animation

查看:925
本文介绍了如何在css变换动画中实现easeOutBack缓动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用一些css动画。但我发现,CSS转换只支持下面的缓动函数。



ease |线性|缓解|缓解|缓入|立方贝赛尔()



我想在纯css的动画中使用类似easeOutBack缓动的东西。我想用webkit动画做。但只有safari支持它。


easeOutBack动作是一个动作
,其中对象将超出
边界更多关于不同的运动功能。
您可以在下面看到此链接。




I am working with some css animation. But I found that, the CSS transition only support following easing function.

ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()

I do want to use something like easeOutBack easing in the animation with pure css. I am thinking to do it with the webkit-animation. But only safari support it.

The easeOutBack motion is a motion where the object will go beyond the boundary and back again.More about different motion function. You can see this link below.

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

Anyone have suggestion of how to implement easeOutBack easing in css transform animation?

解决方案

You can specify your own curve with the -webkit-animation-timing-function CSS property.

The format of the function is cubic-bezier(P1x, P1y, P2x, P2y) where P1 and P2 are the two middle points of a cubic bezier curve from (0,0) to (1,1). In your case you want something that looks like -

So the points you would specify in this curve are - (0,0) and (0.2,1). This makes the curve - cubic-bezier(0,0,0.2,1).

Alas, the webkit cubic curve specification does not allow the animation to exceed the bounds of 1,1 cube. So to actually animate the curve as desired you need to add an extra keyframe that specifies the 'overflow'.

@-webkit-keyframes snapback {
    0% {
        -webkit-transform:translateX(0px);
    }
    60% {
        -webkit-transform:translateX(140px);
    }
    100% {
        -webkit-transform:translateX(100px);
    }
}

Take a look at the example I threw together - http://jsfiddle.net/Heqs8/

这篇关于如何在css变换动画中实现easeOutBack缓动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆