为什么我的动画会做我不期望的事情？答案

【问题标题】：Why is my animation doing what I don't expect?为什么我的动画会做我不期望的事情？
【发布时间】：2015-02-03 12:08:45
【问题描述】：

我正在尝试为处理 CSS 和 jQuery 的卡片制作动画。

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

为什么？
我是不是很傻？

@-webkit-keyframes deal {

from {
}

to { 
    left: 0px;
    top: 0px;
   -webkit-transform: rotate(720deg);
    }
}

img {
position: absolute;}

.card {
    position: absolute;
    -webkit-animation: deal .2s 1 ;
    -webkit-animation-play-state: running;
    -webkit-animation-timing-function: cubic-bezier(.1,.35,.1,.85);
}

<img class='' id='card' src='img/b2fv.png' />

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

});

【问题讨论】：

感谢 animuson 修复了我格式错误的代码。

标签： javascript jquery css animation css-animations

【解决方案1】：

您也可以在没有关键帧的情况下执行此操作，只需使用 transition 属性

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

demo

【讨论】：

也谢谢你。多年来，我一直在与动画作斗争。我讨厌关键帧！
+1 伴侣。这也是一个不错的选择，但取决于确切的需求。我认为这个问题只是一个示例，实际上还有比此处发布的更多内容（证明使用关键帧动画的合理性）。
我觉得你很准哈利。我正在使用关键帧，因为我想看到两点之间的“补间”。如果我使用此代码，我可以让卡片旋转，但如果我将 translate() 添加到组合中，它会失败。

【解决方案2】：

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

来自MDN Link

填充模式：转发

目标将保留执行期间遇到的最后一个关键帧设置的计算值。最后遇到的关键帧取决于animation-direction和animation-iteration-count的值

.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 */
}

Demo

【讨论】：