animation-fill-mode not working

Question

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 animation: ``` #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%;} } ``` shake animation: ``` #name:hover { **margin-right: 10%; //i also have to set this…

Accepted Answer

Setting `animation-fill-mode: forwards` means that after the animation has completed execution, the animation will hold at final properties until it 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 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.)

animation-fill-mode not working

Solution

Problem