CSS hover animation stays on last keyframe when using transform: rotate
I'm trying to get this animation to stay at its last keyframe on hover, but it keeps returning to the start. I don't mind if I get distracted from this, but not while hovering. I've looked through a lot of stack questions and everyone said they use animation-fill mode: forward, but that doesn't seem to work.
Here is my code and link to jsfiddle
.circle:hover .spin {
-webkit-animation-name: drop;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes drop {
100% {
-webkit-transform: rotate(90deg);
}
}
source to share
For those of you with a similar problem, make sure you are using first animation-fill-mode: forwards
. See this related question .
In this particular case, the following matters:
An element to be transformed is an element whose layout is determined by a CSS block model, which is either a block or atomic line-level element , or whose display property is calculated in a table-table, table-row-group, table-header-group, table-footer , cell table, or table header.
Since the element .circle
is span
, it is by default inline
, so the property transform: rotate()
will not affect it after the animation ends. Changing display
it to inline-block
or block
will fix the problem.
You should also use animation shortening . Also, add in other vendor prefixes:
.circle:hover .spin {
display:inline-block;
-webkit-animation: drop 1s 1 alternate ease-out forwards;
-moz-animation: drop 1s 1 alternate ease-out forwards;
animation: drop 1s 1 alternate ease-out forwards;
}
source to share