How to spin and rotate in css?

Question

I have tried spinning and sliding seperately and they work fine. But when I combine them they have an awkward combo.

img{

    border-radius:50%;  
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

there was a lot of flickering but @Aramil Rey seemed to have solved it — user5003867
– user5003867, Commented Jun 12, 2015 at 17:34

Aramil Rey · Accepted Answer · 2015-06-12 18:12:00Z

2

Its because you are using keyFrame, you can achieve this with transform alone.

Take a look at this: (Also, hovering an img while its moving is not an easy task)

img{
    border-radius:50%;    
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;    
}

button:hover + img {
    position: relative;
    transform: translateX(200px) rotate(360deg);
}

<button>Animate!</button>
<img src="http://lorempixel.com/output/nature-q-c-100-100-9.jpg"/>

To make image stay where it is after animation ended: 1) Remove button:hover + img {} from CSS 2) Add JS

JQuery:

$('button').click(function() {
    $('img').css('transform', 'translate(200px) rotate(360deg)');
});

JS Fiddle - Element not returning to starting position!

edited Jun 12, 2015 at 18:12

answered Jun 12, 2015 at 16:12

Aramil Rey

3,4751 gold badge23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user5003867 Over a year ago

is there anyway to stop it from rotating back?

Aramil Rey Over a year ago

You are adding CSS to the element only while 'button:hover' is being triggered, you should add those styles permanently with JS to make the image stay where it was after the animation

user5003867 Over a year ago

I just wanted to make it rotate and stop with a display: none. for example: it rotates, stops, then clears.

Collectives™ on Stack Overflow

How to spin and rotate in css?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related