动画填充模式不起作用答案

【问题标题】：animation-fill-mode not working动画填充模式不起作用
【发布时间】：2012-11-14 10:18:19
【问题描述】：

我试图让一个标题飞入，然后当你悬停它时，它应该会摇晃（都带有 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); } 
}

【问题讨论】：

如果我在动画完成后 100 毫秒将其添加到 js 中，它可以工作......但这非常难看：document.getElementById("name").style.marginRight = "10%";跨度>
给你codepen.io/tobbbe/pen/ozlKc（是的，我知道动画很丑，稍后会修复它）

标签： html css css-animations

【解决方案1】：

设置animation-fill-mode: forwards 意味着动画完成执行后，动画将保持在最终属性，直到被移除。当鼠标停止悬停时，-webkit-animation 属性返回到它的默认值（空白），这意味着shake 动画被移除，一切都恢复到原来的样子。要使动画保持其最终属性，您必须将 shake 动画应用于元素。（换句话说，animation-fill-mode 只有在应用动画时才有效。）

【讨论】：

嗯，好吧，我想我明白了。但是我应该如何将摇动动画应用到元素上呢？
@tobbe 一种选择是在悬停开始时以编程方式应用它，并且永远不要删除它。
animation-fill-mode属性的值以s结尾=> insted forward => forwards

【解决方案2】：

要使动画在鼠标离开元素时保持在其状态，您需要将所有动画属性添加到处于正常状态的元素，不是:hover，加：

animation-play-state: paused

在:hover 上仅添加：

animation-play-state: running

【讨论】：