动画填充模式不工作

我试图获得一个标题飞入和之后，当你把它悬停，它应该动摇（与css3动画）。它以我想要的方式飞行，也抖动，但是在从元素中移除鼠标之后，即使设置了“-animation-fill-mode：forwards”，它也会返回到原始边界右边（它在飞翔动画之前） ; 当我看着chromedevtools时，元素永远不会改变它的边距 - 右边（即使动画工作..）。我能解决这个问题吗？动画填充模式不工作

此外，有没有一种方法可以防止第一个动画在摇动后再次发生？

飞翔动画：

#name { 
margin:40px 2% 40px 0; 

-webkit-animation:flyin 1.5s; 
-webkit-animation-fill-mode: forwards; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-animation-delay: 1800ms; 
} 

@-webkit-keyframes flyin { 

from{margin-right: 2%;} 
30% {margin-right: 12%;} 
50% {margin-right: 9%;} 
60% {margin-right: 10%;} 
to {margin-right: 10%;} 
}

抖动动画：

#name:hover { 
     **margin-right: 10%; //i also have to set this?! or it starts at 2%** 
     -webkit-animation:shake 0.7s; 
     -webkit-animation-fill-mode: forwards; 
     -webkit-transform-origin:50% 50%; 
     -webkit-animation-iteration-count: infinite; 
     -webkit-animation-timing-function: linear; 


    } 

    @-webkit-keyframes shake { 
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 
100% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
}

来源

2012-11-26 tobbe

如果我在动画完成后在js 100ms中添加它，它可以工作......但那很丑陋：document.getElementById（“name” ）.style.marginRight =“10％”; – tobbe

我们可以看演示吗？ – Sam

这里你去http://codepen.io/tobbbe/pen/ozlKc（是的，我知道动画是丑陋的，稍后会修复它） – tobbe

设置animation-fill-mode: forward意味着动画已经完成执行后，该动画将在其最终性能保持到动画被删除。当鼠标停止悬停时，-webkit-animation属性将返回其默认值（空白），这意味着将删除动画shake，并且所有内容都会返回到原来的样子。要使动画保持其最终属性，必须将shake动画应用于元素。（换句话说，只要动画被应用，animation-fill-mode是有效的。）

来源

2012-11-26 22:05:44

嗯，好吧，我想我明白了。但我应该如何保持应用到元素的摇动动画？ – tobbe

@tobbe一种选择是在悬停开始时以编程方式应用它，并且永不删除它。 –

动画填充模式不工作

回答

相关问题