javascript - 动画结束后旋转div

Question

我正在尝试创建一种碰撞测试假人，当您在 document 窗口中单击时，我的 .person div 将向右移动，然后在最后设置动画向前倾斜，然后向后倾斜到原来的位置。

我有用于转换的 css，只是它会立即倾斜我的 div 而不是在移动结束时？抱歉，如果这很难理解，我创建了一个 jsFiddle 来解释...

http://jsfiddle.net/4mzg8/3/

// On click my .person div will move right, once moved it needs to tilt forward and then backwards - as though its hit a wall...

$(document).on('click',function(){
    $('.person').animate({ "left": "+=250px" }, 500, crashImpact(30));
});

function crashImpact(tilt) {
    $('.person').css({
        transform: 'rotate(' + tilt + 'deg)'
    });
}

Answer 1

它需要一些工作，但您只需添加一个类和链接动画就可以在 CSS 中完成所有事情...

Demo Fiddle - ( Chrome )

JS

$(document).on('click', function () {
    $('.person').addClass('go');
});

CSS

.person.go {
    -webkit-animation-delay:0, .5s;
    -webkit-animation-duration:.5s, .5s;
    -webkit-animation-iteration-count:1, 1;
    -webkit-animation-name:animForward, animTilt;
    -webkit-animation-timing-function:ease-in;
    -webkit-animation-fill-mode:forwards;
    -webkit-transform-origin: 0%;
}
@-webkit-keyframes animForward {
    from {
        margin-left: 0;
    }
    to {
        margin-left: 400px;
    }
}
@-webkit-keyframes animTilt {
    0% {
        -webkit-transform:rotate(0deg);
    }
    50% {
        -webkit-transform:rotate(45deg);
    }
    100% {
        -webkit-transform:rotate(0deg);
    }
}