CSS3动画+ @keyframe运行，直到结束 [英] CSS3 Animation + @keyframe run till the end

问题描述

我找不到播放动画，直到结束的方式，当一个元素是：悬停

• 当我：悬停出来，动画复位 - 但我希望它继续到结束
。

• 的jsfiddle

 ＆LT; D​​IV CLASS =图片＆GT;＆LT; / DIV＆GT;
 

.picture：悬停{
       -webkit-动画：摇摆1S缓解-IN-OUT;
    }
    @ -webkit-关键帧摇摆{
      [...]
    }


解决方案

也许不是一个完整的解决方案，但以下内容添加到您的图片类：

  -webkit-动画：摇摆3600ms缓解-IN-OUT 6000S;
-webkit-变换产地：顶部;
 

的jsfiddle： http://jsfiddle.net/5SueS/4/

I can't find the way to play an animation till the end when an element is :hover.

• When i :hover out, the animation reset - but i want it to continue till the end.
• JsFiddle

<div class="picture"></div>

    .picture:hover {
       -webkit-animation:swing 1s ease-in-out;
    }


    @-webkit-keyframes swing {
      [...] 
    }

解决方案

Probably not a complete solution, but add the following to your picture class:

-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;

JsFiddle: http://jsfiddle.net/5SueS/4/

这篇关于CSS3动画+ @keyframe运行，直到结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！