CSS Animation on Hover Stay at Last Keyframe When Using Transform: Rotate

CSS animation on hover stay at last keyframe when using transform: rotate

For those of you with a similar problem, first make sure you are using animation-fill-mode: forwards. See this related question.

In this specific case, the following is relevant:

CSS Transforms Module Level 1
A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.

Since the .circle element is a span, it is inline by default, therefore the property transform: rotate() won't have an effect on it after the animation ends. Changing the display of it to either inline-block or block will solve the problem.

You should also be using the animation shorthand. In addition, add in other vendor prefixes:

Updated Example Here

.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;
}

Continuous CSS rotation animation on hover, animated back to 0deg on hover out

The solution is to set the default value in your .elem.
But this annimation work fine with -moz but not yet implement in -webkit

Look at the fiddle I updated from yours :
http://jsfiddle.net/DoubleYo/4Vz63/1648/

It works fine with Firefox but not with Chrome

.elem{    position: absolute;    top: 40px;    left: 40px;    width: 0;     height: 0;    border-style: solid;    border-width: 75px;    border-color: red blue green orange;    transition-property: transform;    transition-duration: 1s;}.elem:hover {    animation-name: rotate;     animation-duration: 2s;     animation-iteration-count: infinite;    animation-timing-function: linear;}
@keyframes rotate {    from {transform: rotate(0deg);}    to {transform: rotate(360deg);}}

<div class="elem"></div>

Maintaining the final state at end of a CSS3 animation

Try adding animation-fill-mode: forwards;. For example like this:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

@keyframes animation (rotate) and :hover (scale)

The simplest solution would be to wrap the symbol-1 and symbol-2 in another element and transform this element when hovered. Also use a transition in order to animate it. Take a look at the snippet inserted below.

.pattern { height: 100vh; width: 100vw; margin: 0 auto;  background-color: rgb(170, 57, 57);  color: rgb(255,255,255);}
.grid { display: grid; grid-template-columns: repeat(12, 1fr);  grid-template-rows: repeat(8, 1fr); justify-items: center; align-items: center; overflow: hidden;}
.symbol { -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease;  transform: scale(0.5);  font-size: 2em}
.symbol:hover {  transform: scale(1);}
.symbol-1 { grid-area: 2 / 2 / 2 / 2; justify-self: center;}
.symbol-2 { grid-area: 4 / 3 / 3 / 5; justify-self: center; align-self: start;}
.downRight { animation: downRight 7s infinite;}
.spin { animation: spin 7s infinite;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
@keyframes downRight { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(20px) translateY(20px); }}

<body>  <div class="pattern grid">    <!-- Wrap the symbols in a div with class "symbol" that scales on hover -->   <div class="symbol symbol-1"><div class="downRight"> 1 </div></div>    <div class="symbol symbol-2"><div class="spin"> 2 </div></div>  </div></body>

CSS3 Transition Keeps Resetting Rotation

Try adding display: inline-block
like this:

a:hover span:before {
    margin-left: 55%; 
    -webkit-transform: rotate(90deg); 
    display: inline-block;
}

fiddle.

Explanation.

The pseudo elements, like :before or :after are inline, by default, so they have issues with being transformed, thus you need to set them to display: block or display: inline-block.

How can I let my css3 animation to stay at its animated position when it finishes animating?

You're looking for

-webkit-animation-fill-mode: forwards;

DEMO

CSS Animation on Hover Stay at Last Keyframe When Using Transform: Rotate