1

I need to spin an image horizontally. Usually we use gifs to show that something is loading, like an AJAX request for example. I found this example but it shows a vertical rotation. I want an animation like this one.

How can I do this with CSS and jQuery?

Community
  • 1
  • 1
Pablo Anaya
  • 181
  • 1
  • 1
  • 8

1 Answers1

13

Researching I've found an answer to my question. We need to use the rotateY attribute for the -webkit-transform CSS property.

.imageRotateHorizontal{
    -moz-animation: spinHorizontal .8s infinite linear;
    -o-animation: spinHorizontal .8s infinite linear;    
    -webkit-animation: spinHorizontal .8s infinite linear;
    animation: spinHorizontal .8s infinite linear;
}

@keyframes spinHorizontal {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* Vendor specific keyframes go here */

Additionally, we have to define an animation with a reasonable time. For example I'm going to set the animation to 0.8 seconds. It means that our image are going to perform a complete rotation each 0.8 seconds.

I've prepared a jsFiddle showing the complete code width an example: http://jsfiddle.net/AB277/7/

Pablo Anaya
  • 181
  • 1
  • 1
  • 8
  • `-webkit-transform` inside `-moz-keyframes`? Looks like you don't fully understand what you are doing. And where is the standard property? – Pavlo Nov 26 '13 at 13:12
  • You are right, @Pavlo. It was a wrong copy&paste in a hurry morning. Sorry for that and thank you for your comments. – Pablo Anaya Nov 26 '13 at 15:00
  • Thank you, @PabloAnaya for posting this answer and providing jsfiddle! – ComeOn Dec 07 '15 at 18:23