Stop a CSS animation in a certain degree of rotation

Question

Stop a CSS animation in a certain degree of rotation

Navigation

#1 by (2 votes)

2

How can I stop the 90º rotation animation for example? Without it flying to its initial state.

My idea is that of the vertical state turn to 60º, then return to 40º and then to 60º. (like simulating the fall of a wooden sign nailed to the wall)

Here I leave the example with the badly humored kitten. link

html css3

asked by Oren Diaz 02.10.2017 в 21:34

source

1 answer

How do I solve the error created by overflow-x: hidden ;? Jquery and Javascript slot machine does not work

score 2 · Accepted Answer

This is what you would have to do so that the img gets the animation 60deg 40deg 60deg that you require (you can now play with the times to adapt it exactly to what you need):

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation: rotate 2s forwards;
    -moz-animation: rotate 2s forwards;
    -ms-animation: rotate 2s forwards;
    -o-animation: rotate 2s forwards;
    animation: rotate 2s forwards;
}

@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    45% { -webkit-transform: rotate(60deg); }
    75% { -webkit-transform: rotate(40deg); }
    100% { -webkit-transform: rotate(60deg); }
}

@keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    45% { -webkit-transform: rotate(60deg); }
    75% { -webkit-transform: rotate(40deg); }
    100% { -webkit-transform: rotate(60deg); }
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

I hope you serve, greetings!