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    x000D   x000D  div   x000D    margin  20px  x000D    width  100px  x000D    height  100px  x000D    background   f00  x000D    -webkit-animation-name  spin  x000D    -webkit-animation-duration  40000ms  x000D    -webkit-animation-iteration-count  infinite  x000D    -webkit-animation-timing-function  linear  x000D    -moz-animation-name  spin  x000D    -moz-animation-duration  40000ms  x000D    -moz-animation-iteration-count  infinite  x000D    -moz-animation-timing-function  linear  x000D    -ms-animation-name  spin  x000D    -ms-animation-duration  40000ms  x000D    -ms-animation-iteration-count  infinite  x000D    -ms-animation-timing-function  linear  x000D    -o-transition  rotate 3600deg   x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Accepted Answer

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 at http://jsfiddle.net/gaby/9Ryvs/7/

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

User · Answer

The only answer which gives the correct 359deg    keyframes spin     from   transform  rotate 0deg       to   transform  rotate 359deg         amp  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

HTML with font-awesome glyphicon    lt span class  fa fa-spinner spin  gt  lt  span gt    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

User · Answer

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

User · Answer

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

User · Answer

keyframes spin       from  transform rotate 0deg        to  transform rotate 360deg        this will make you to answer the question

[css] CSS3 Spin Animation

Examples related to css

Examples related to css-animations