CODEWITHSUNDEEP
htmlcsscss-animations
tobbe
tobbe

Reputation: 1807

animation-fill-mode not working

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?! 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); } 
}

Upvotes: 8

Views: 20310

Answers (2)

Raymond Chen
Raymond Chen

Reputation: 45172

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.)

Upvotes: 10

Bartek
Bartek

Reputation: 1300

To make the animation hold at its state when mouse is leaving element, you need to add all animation properties to an element in normal state, not :hover, plus:

animation-play-state: paused

On :hover add only:

animation-play-state: running

Upvotes: 1

Related Questions