html5动画播放状态,html5 – 动画填充模式不起作用

1、html5动画播放状态,html5 动画填充模式不起作用我试图让一个标题飞进来,之后当你将它悬停时,它应当摇动(两者都用css3动画).它以我想要的方式飞翔,也摇摆,但是在我从元素中移除鼠标之后它会回到原始边缘 – 右边(它在飞翔动画之前),即使我设置了——-animation-fill-mode：前锋;当我查看chromedevtools时,元素永久不会转变其边距(即使动画有效).我能解决这个问题吗？另外,有没有方法防止第一个动画在摇动动画后再次发生？飞行动画：name margin:40px 2% 40px 0;-webkit-a

2、nimation:flyin 1.5s;-webkit-animation-fill-mode: forwards;-webkit-animation-timing-function: ease-in-out;-webkit-animation-delay: 1800ms;-webkit-keyframes flyin frommargin-right: 2%;30% margin-right: 12%;50% margin-right: 9%;60% margin-right: 10%;to margin-right: 10%;摇动画：name:hover *margin-right: 10

3、%; /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)

4、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(0