CSS3 Rotate Animation

Question

<img class="image" src="" alt="" width="120" height="120">

Cannot get this animated image to work, it is supposed to do a 360 degrees rotation.

I guess something's wrong with the CSS below, as it just stays still.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}

score 612 · Accepted Answer · edited Nov 18 '19 at 09:50

612

Here is a demo. The correct animation CSS:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Some notes on your code:

You've nested the keyframes inside the .image rule, and that's incorrect
float:left won't work on absolutely positioned elements
Have a look at caniuse: IE10 doesn't need the -ms- prefix

edited Nov 18 '19 at 09:50

Phil

6,085
2
39
64

answered May 27 '13 at 11:00

Giona

18,857
4
48
68

13

If anyone tries this in their own code: DONT FORGET THE @ section at the bottom – Jack M. Sep 12 '13 at 22:21
Hello Can I stop animation Infinity rotation after 5s ? – MD Ashik Nov 13 '16 at 09:56
21

I almost spat my water out when I ran the animation. – Razgriz Feb 12 '17 at 15:07
" `float:left won't work on absolutely positioned elements` " , it will shrink them to minimum size though, similar to what display: inline-block does – gregn3 Nov 20 '18 at 02:30

Nitesh · Answer 2 · 2015-12-25T07:12:19.907

47

To achieve the 360 degree rotation, here is the Working Solution.

The HTML:

<img class="image" src="your-image.png">

The CSS:

.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

You have to hover on the image and you will get the 360 degree rotation effect.

PS: Add a -webkit- extension for it to work on chrome and other webkit browers. You can check the updated fiddle for webkit HERE

edited Dec 25 '15 at 07:12

answered May 27 '13 at 10:40

Nitesh

14,619
4
40
52

Fiddle doesn't work o.O Chrome inspector does not like your CSS, specifically the "transform" and "transition-property". Oh dear. – Just Plain High Apr 05 '14 at 10:07
1

For that you need to add a `-webkit-tranform` for it to work. Here is the updated fiddle. http://jsfiddle.net/sELBM/172/ - @JustPlainHigh – Nitesh Apr 07 '14 at 06:27
1

2017: This is now very well supported and a preferred way to do non-infinite rotations. `-webkit-` prefix is no longer needed and can be safely removed. Browser support: http://caniuse.com/#search=transforms – Slava Sep 13 '17 at 11:48
Clean and beautiful – optimiertes Dec 17 '20 at 11:08

score 34 · Answer 3 · edited May 04 '17 at 14:47

34

I have a rotating image using the same thing as you:

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}

edited May 04 '17 at 14:47

Jamie Barker

7,735
3
26
62

answered May 27 '13 at 11:47

Ryan de Vries

656
4
13

1

add: `transform:rotate(360deg);` for IE – Dusty Dec 08 '14 at 17:19
3

Please choose local examples over broken website links. – evolutionxbox Mar 18 '16 at 16:49
Link is broken now. – Markus Bucher Aug 21 '16 at 13:05

score 2 · Answer 4 · answered Nov 07 '14 at 05:06

if you want to flip image you can use it.

.image{
    width: 100%;
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }

score 1 · Answer 5 · answered Apr 06 '20 at 16:03

try this easy

 
 .btn-circle span {
     top: 0;
   
      position: absolute;
     font-size: 18px;
       text-align: center;
    text-decoration: none;
      -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.btn-circle span :hover {
 color :silver;
}


/* rotate 360 key for refresh btn */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

 <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">&#x21bb;</span></button>

score 0 · Answer 6 · answered Mar 09 '21 at 11:23

The another method to rotate an object in the background using css3, check out the below css3 code here: object animation Demo Here

.floating-ball-model-3 > span {
    animation-name: floating-ball-model-3;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: floating-ball-model-3;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: floating-ball-model-3;
    -moz-animation-duration: 7s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: floating-ball-model-3;
    -ms-animation-duration: 7s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: floating-ball-model-3;
    -o-animation-duration: 7s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}


@keyframes floating-ball-model-3 {
    from {
        transform: rotate(0deg);
    }
    to { 
        transform: rotate(360deg);
    }
}

The non-prefixed properties should generally come last. The reasoning is that properties overwrite each other, so if the browser supports the non-prefixed versions, these should overwrite any non-standard values set above. — Jan Aagaard, Mar 29 '21 at 11:02

Abhi · Answer 7 · 2014-05-09T09:53:56.823

-6

Here this should help you

The below jsfiddle link will help you understand how to rotate a image.I used the same one to rotate the dial of a clock.

http://jsfiddle.net/xw89p/

var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){       
          return c*(t/d)+b;
      }
   });
}
rotation();

Where: • t: current time,

• b: begInnIng value,

• c: change In value,

• d: duration,

• x: unused

No easing (linear easing): function(x, t, b, c, d) { return b+(t/d)*c ; }

edited May 09 '14 at 09:53

answered Nov 01 '13 at 07:12

Abhi

85
1
3
10

2

I would upvote this answer if you provide a bit more information (like you do in the fiddle). I also feel you should mention this is a jQuery plugin because I was all like, "I didn't know jQuery could do that!!! ^_^ *looks at fiddle* Oh wait... U_U" – Just Plain High Apr 05 '14 at 10:04
2

an explanation of the x,t,b,c,d variables (like you do in the fiddle) and clearly stating that although it isn't a CSS solution as requested by OP, it is quite a simple and effective jQuery plugin solution :) – Just Plain High May 03 '14 at 16:56
3

Downvoted. The OP didn't request a Javascript solution, especially not a jQuery plugin. Stick to what's being asked. – TheCarver Mar 15 '15 at 09:46

CSS3 Rotate Animation

7 Answers7

Linked

Related