html5 – 动画填充模式不起作用

我试图让一个标题飞进来,之后当你将它悬停时,它应该摇动(两者都用 css3动画).它以我想要的方式飞行,也摇晃,但是在我从元素中移除鼠标之后它会回到原始边缘 – 右边(它在飞行动画之前),即使我设置了`-animation-fill-mode：前锋;
当我查看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); } 
}

解决方法

设置animation-fill-mode：forward意味着在动画完成执行后,动画将保持其最终属性,直到删除动画.当鼠标停止悬停时,-webkit-animation属性将返回其默认值(空白),这意味着将移除抖动动画,并且一切都将返回到它的状态.要使动画保持其最终属性,您必须将摇动动画应用于元素. (换句话说,动画填充模式仅在应用动画时才有效.)

原文地址：https://www.jb51.cc/html5/241005.html