Question

我有一个目前正在翻译的盒子，但当我对它应用摇动动画时，它会跳到屏幕的左上角。

我想从它当前的位置上撼动它。我怎么能这样做？

这是我的傻瓜。请在webkit浏览器中查看（chrome / safari）

CSS：

div {
    background:red;
    width:100px;
    height:100px;
    -webkit-transform: translate3d(50px, 50px, 0px);
}

@-webkit-keyframes shake {
    0% { -webkit-transform: translateX(3px); }
    50% { -webkit-transform: translateX(-3px); }
    100% { -webkit-transform: translateX(0); }
}
.shake {
    -webkit-animation-name: shake;
    -webkit-animation-duration: 150ms;
    -webkit-animation-iteration-count: 20;
    -webkit-animation-timing-function: linear;
}

HTML：

<div></div>

JAVASCRIPT：

$('div').addClass('shake')

Answer 1

我最终使用了move.js

http://visionmedia.github.io/move.js/

他们用.then（）命令做我想做的事。有一天，我会查看代码，看看他们是如何做到的，因为它完全是用翻译完成的。

Answer 2

您可以使用jQuery为位置设置动画，然后添加带有关键帧动画的类以获得所需的效果。

http://jsfiddle.net/atv7R/3/

$('div').animate({
    top: 50,
    left: 50
}, 1000).addClass('shake');

或者你可以用css来完成同样的事情：

http://jsfiddle.net/atv7R/5/

div {
    position:absolute;
    top: 10px;
    left:10px;
    background:red;
    width:100px;
    height:100px;
}
@-webkit-keyframes shake {
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px);
    }
    50% {
        -webkit-transform: translate3d(3px, 3px, 0px);
    }
    100% {
        -webkit-transform: translate3d(0px, 0px, 0px);
    }
}
.shake {
    top: 50px;
    left: 50px;
    -webkit-transition: top 1s, left 1s;
    -webkit-animation-name: shake;
    -webkit-animation-delay: 1s;
    -webkit-animation-duration: 150ms;
    -webkit-animation-iteration-count: 20;
    -webkit-animation-timing-function: linear;
}

如何从当前翻译中应用css3动画？

2 个答案: