CSS3 Spin Animation

Question

I have reviewed quite a few demos and have no idea why I can't get the CSS3 spin to function. I am using the latest stable release of Chrome.

The fiddle: http://jsfiddle.net/9Ryvs/1/

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}

<div></div>

score 333 · Accepted Answer · edited May 07 '21 at 08:22

To use CSS3 Animation you must also define the actual animation keyframes (which you named spin)

Read https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations for more info

Once you've configured the animation's timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.

Demo :

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;
    -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);
    }
}

<div></div>

@-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);}
}

You get the ✓ because you explained it best and you are the only answer that included all the prefixed versions. — iambriansreed, Feb 13 '13 at 18:07
This is super nitpicky, but you should really have it animate to 359 deg. 360 and 0 degrees are the same radially, so the animation would pause ever so briefly at a full turn. — Adam Grant, Aug 19 '15 at 20:14
@AdamGrant Thank you, this has almost caused me a headache today lol — mattslone, May 25 '16 at 13:11
You want to animate to 359.9999999999 degrees, not 359. Degrees of rotation are a continuous range of [0, 360) and if you rotate to 359.0 you will have a 1 degree tick at the start of every rotation when it warps from 359 to 0. — mdonoughe, Aug 02 '17 at 00:42
To clarify all these comments who are giving incorrect information... the selected answer IS CORRECT without modifications. 0 and 360 deg are actually different in the eyes of the browser, while still being the same point. For example if you try to rotate it from 0deg to 0deg (or 360deg to 360deg), it won't rotate at all. Rotating it from 0deg to 360deg tells the browser to turn the object a full 360 deg before completing the animation. Set the `animation-iteration-count: infinite;` and you will have infinite frames in the animation. Even a 20 minute rotation will look flawless & smooth. — jacurtis, May 23 '18 at 23:15

Jezen Thomas · Answer 2 · 2014-02-05T11:02:58.263

You haven't specified any keyframes. I made it work here.

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

You can actually do lots of really cool stuff with this. Here is one I made earlier.

:)

N.B. You can skip having to write out all the prefixes if you use -prefix-free.

score 18 · Answer 3 · answered Jul 30 '15 at 09:56

As of latest Chrome/FF and on IE11 there's no need for -ms/-moz/-webkit prefix. Here's a shorter code (based on previous answers):

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Live Demo: http://jsfiddle.net/9Ryvs/3057/

Combine animation rules with shorthand `animation: spin 4s linear infinite`. — vhs, Sep 28 '18 at 02:27

score 14 · Answer 4 · edited Jul 13 '18 at 16:33

14

HTML with font-awesome glyphicon.

<span class="fa fa-spinner spin"></span>

CSS

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

.spin {
    animation: spin 1000ms linear infinite;
}

edited Jul 13 '18 at 16:33

Ryan Taylor

12,559
2
39
34

answered Jun 05 '17 at 15:00

pearpages

18,703
1
26
27

1

You also get my upvote for adding the definition for .spin – Blair Connolly Nov 15 '17 at 15:39

score 12 · Answer 5 · answered Aug 28 '19 at 06:39

The only answer which gives the correct 359deg:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

Here's a useful gradient so you can prove it is spinning (if its a circle):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

score 4 · Answer 6 · answered Feb 13 '13 at 17:37

To rotate, you can use key frames and a transform.

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

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

  to {
    -webkit-transform:rotate(360deg);
  }
}

Example

score 4 · Answer 7 · answered Dec 03 '15 at 08:02

For the sake of completion, here's a Sass / Compass example which really shortens the code, the compiled CSS will include the necessary prefixes etc.

div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))

score 0 · Answer 8 · answered Nov 01 '18 at 07:55

0

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

this will make you to answer the question

answered Nov 01 '18 at 07:55

sudarshan

23
6

This appears to be just a repeat of [this existing answer](https://stackoverflow.com/a/31720612). – Pang Nov 01 '18 at 08:19

score 0 · Answer 9 · answered Jan 20 '21 at 15:11

0

For the guys who still search some cool and easy spinner, we have multiple exemples of spinner on fontawesome site : https://fontawesome.com/v4.7.0/examples/

You just have to inspect the spinner you want with your debugger and copy the css styles.

answered Jan 20 '21 at 15:11

Foxlab

564
3
9

CSS3 Spin Animation

9 Answers9

Linked

Related