动画填充模式不工作 [英] animation-fill-mode not working

问题描述

我试图得到一个标题，飞行后，当你悬停它，它应该摇（两者与css3动画）。它飞行在我想要的方式，也摇动，但后ive删除的元素，它回到原来的margin-right（它在flyin动画之前）即使ive设置`-animation-fill-mode：转发;
当我看到chromedevtools元素从不改变其边缘 - 右（即使动画工作..）。我可以解决这个问题吗？

Im trying to get a header to fly in and after that when you hover it, it should shake (both with css3 animation). It flies in the way i want, also shakes, but after ive removed the mouse from the element it goes back to the original margin-right (it had before the flyin animation) even though ive set `-animation-fill-mode: forwards; When i look in chromedevtools the element never changes its margin-right (even though the animation works..). Can i fix this?

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

Also, is there a way of preventing the first animation to happen again after the shake animation?

flyin动画：

#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); } 
}

推荐答案

c> animation-fill-mode：forward 意味着动画完成执行后，动画将保持其最终属性，直到动画被删除。当鼠标停止悬停时， -webkit-animation 属性返回其默认值（空白），这意味着 shake 动画被删除，一切返回到它是怎么回事。要使动画保持其最终属性，您必须保持应用于元素的 shake 动画。 （换句话说， animation-fill-mode 只有在应用动画时才有效。）

Setting animation-fill-mode: forward means that after the animation has completed execution, the animation will hold at its final properties until the animation is removed. When the mouse stops hovering, the -webkit-animation property returns to its default value (blank), which means that the shake animation is removed, and everything returns to how it was. To make the animation hold at its final properties, you have to keep the shake animation applied to the element. (In other words, animation-fill-mode is effective only as long as the animation is applied.)

这篇关于动画填充模式不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！