Javascript 动画后旋转div

我正在尝试创建一种碰撞测试假人，当您在

文档

窗口中单击my

时，person

div将向右移动，然后在最后设置动画“向前倾斜”，然后向后倾斜到其原始位置

我已经得到了转换的css，只是它立即倾斜我的

div

，而不是在运动结束时？抱歉，如果这很难理解，我已经创建了一个JSFIDLE来解释

我修改了你的代码。勾选此处：

您已经写了：

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

这将立即调用

crashImpact函数

将其更改为：

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

执行完

animate

后，将调用

crashImpact函数

transition
属性将平滑地旋转
。person

写：

CSS:

JS:

这需要一些工作，但您可以通过添加类和链接动画在CSS中完成全部工作

-（铬）
JS

CSS

crashImpact（30）；立即调用。为了将其作为回调传递，它只是“crashImpact”。你必须以其他方式提供倾斜参数。帮不上忙，但你和你的CSS小人物一起度过了我的一天！：D haah+1卓越的CSS3解决方案，良好的关注点分离。如果你想让人倾斜，但最后你需要在100%关键帧处保持
45度
而不是
0度
：
@-webkit关键帧animtile{0%{-webkit transform:rotate（0deg）；}100%{-webkit transform:rotate（45deg）；}
$('.person').animate({ "left": "+=250px" }, 500, crashImpact(30));

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

.transform{
    transition:all 1s;
    -webkit-transition:all 1s;
}

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

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

.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);
    }
}