Question

我试图动画处理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');
    });

});

Answer 1

只需使用transition属性

，您也可以在没有关键帧的情况下执行此操作

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

<强> demo

Answer 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

为什么我的动画做了我不期望的事情？

2 个答案: