为什么我的动画做了我没有预料到的事情?

Why is my animation doing what I don't expect?

本文关键字：动画 我的 为什么      更新时间：2023-09-26

我正在尝试用CSS和jQuery制作卡片动画。

我在窗口的底部放置了一张卡片的.png图像，我希望它通过旋转和移动到屏幕的顶部来响应单击事件。虽然纸牌会这样做，但动画结束时它不会停留在x,y坐标上。它会在屏幕底部重新定位。

  1. 为什么?
    2. 我这么做是不是太蠢了?
@-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');
    });
});

您也可以通过使用transition属性

而不使用关键帧来实现这一点
#card.card {
    left: 10px;
    top: 0px;    
    -webkit-transform: rotate(720deg);
}
#card {
    -webkit-transition: all 5s;
    position:absolute;
}

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

From this MDN Link

填充方式:forward

目标将保留执行期间遇到的最后一个关键帧设置的计算值。最后遇到的关键帧取决于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 */
}

相关文章：