Javascript 为什么我的动画在做我不做的事情'；我没料到？

我正在尝试动画卡处理CSS和jQuery

我在窗口底部放置了一张卡片的.png图像，我希望它通过旋转并移动到屏幕顶部来响应点击事件。当动画完成时，卡不会停留在x，y坐标上。它实际上将自己重新定位在屏幕底部开始的位置

为什么?

我只是在胡闹吗

@-webkit关键帧交易{
从{
}
到{
左：0px；
顶部：0px；
-webkit变换：旋转（720度）；
}
}
img{
位置：绝对；}
.卡片{
位置：绝对位置；
-webkit动画：deal.2s 1；
-webkit动画播放状态：正在运行；
-webkit动画计时功能：立方贝塞尔（.1、.35、.1、.85）；
}

---

您需要将动画的填充模式设置为“向前”。这样做将使动画元素在动画完成后保持其最终关键帧的位置

由此

填充模式：向前

目标将保留由执行期间遇到的最后一个关键帧设置的计算值。遇到的最后一个关键帧取决于动画方向和动画迭代计数的值

---

您也可以在不使用关键帧的情况下执行此操作，只需使用

transition

属性即可

#card.card {
    left: 10px;
    top: 0px;    
    -webkit-transform: rotate(720deg);
}
#card {
    -webkit-transition: all 5s;
    position:absolute;
}

---

谢谢animuson修复了我格式不好的代码。也谢谢你。多年来，我一直在努力制作动画。我讨厌关键帧+1大副。这也是一个不错的选择，但取决于具体需求。我假设这个问题只是一个示例，实际上比这里发布的问题更多（这证明了使用关键帧动画是合理的）。我想你对Harry很有兴趣。我使用关键帧是因为我想看到两点之间的“tweening”。如果我使用这段代码，我可以让卡片旋转，但是如果我在混合中添加translate（），它就会失败。

function placeElements(){
    var wh = $(window).height();
    var ww = $(window).width();
    var ch = $('#card').height();
    var cw = $('#card').width();
    var cx = (ww - cw)/2;
    var cy = (wh - ch);
    $('#card').css('left',cx); 
    $('#card').css('top',cy);
}

$(document).ready(function(){

    placeElements();

    $(window).resize(function () {
        placeElements()
    });

    $("#card").on('click', function(){
        $(this).attr('class','card');
    });

});

.card {
    position: absolute;
    -webkit-animation: deal .2s 1 ;
    -webkit-animation-play-state: running;
    -webkit-animation-timing-function: cubic-bezier(.1,.35,.1,.85);
    -webkit-animation-fill-mode: forwards; /* Add this and also the corresponding browser specific versions */
}

#card.card {
    left: 10px;
    top: 0px;    
    -webkit-transform: rotate(720deg);
}
#card {
    -webkit-transition: all 5s;
    position:absolute;
}