Question

我在div上使用-webkit-animation，如下所示：

#agFloor {
    background-image: url('http://blabla/something.jpg');
    width: 375px;
    height: 364px;
    top:0;
    left:20px;
    -webkit-animation: FloorAnim 5s ease-in-out; 
}

使用关键帧;

@-webkit-keyframes FloorAnim {
    0% { -webkit-transform: translateY(100%); }
    40% { -webkit-transform: translateY(-60%); }
    80% { -webkit-transform: translateY(-60%); }
    100% { -webkit-transform: translateY(0%); }
}

我的问题是，据我所知这应该是一次性动画，但是当我淡入淡出/隐藏和淡入淡出/用jQuery显示div就像是每次添加规则所以每次动画都完成div显示或淡出。

这是一个WAD还是某种bug？，无论如何都要避免这种行为吗？。

我想只让动画播放一次，然后再使用div播放，而不是每次触发动画。

韩国社交协会。

Answer 1

进行隐藏时，通过-webkit-animation

将none设为.css

$(this).css("-webkit-animation", "none");

http://jsfiddle.net/BHF8m/

每次div淡入时触发css3动画

1 个答案: