CSS endless rotation animation

Question

I want to make a rotation of my loading icon by CSS   I have an icon and the following code    lt style gt   test       width  32px      height  32px      background  url  refresh png        rotating       -webkit-transform  rotate 360deg       -webkit-transition-duration  1s      -webkit-transition-delay  now      -webkit-animation-timing-function  linear      -webkit-animation-iteration-count  infinite     lt  style gt    lt div id  test  class  rotating  gt  lt  div gt    But it doesn t work  How can the icon be rotated using CSS

User · Answer

Infinite rotation animation in CSS   x000D   x000D     ENDLESS ROTATE    x000D   rotate  x000D    animation  rotate 1 5s linear infinite   x000D    x000D   keyframes rotate  x000D    to  transform  rotate 360deg     x000D    x000D   x000D   x000D     SPINNER JUST FOR DEMO    x000D   spinner  x000D    display inline-block  width  50px  height  50px  x000D    border-radius  50   x000D    box-shadow  inset -2px 0 0 2px  0bf  x000D    x000D   lt span class  spinner rotate  gt  lt  span gt  x000D   x000D   x000D    MDN - Web CSS Animation

User · Answer

Works in all modern browsers   rotate   animation  loading 3s linear infinite    keyframes loading     0         transform  rotate 0          100         transform  rotate 360deg

User · Answer

x000D   x000D   -webkit-keyframes rotating    Safari and Chrome      x000D    from   x000D      -webkit-transform  rotate 0deg   x000D      -o-transform  rotate 0deg   x000D      transform  rotate 0deg   x000D      x000D    to   x000D      -webkit-transform  rotate 360deg   x000D      -o-transform  rotate 360deg   x000D      transform  rotate 360deg   x000D      x000D    x000D   keyframes rotating   x000D    from   x000D      -ms-transform  rotate 0deg   x000D      -moz-transform  rotate 0deg   x000D      -webkit-transform  rotate 0deg   x000D      -o-transform  rotate 0deg   x000D      transform  rotate 0deg   x000D      x000D    to   x000D      -ms-transform  rotate 360deg   x000D      -moz-transform  rotate 360deg   x000D      -webkit-transform  rotate 360deg   x000D      -o-transform  rotate 360deg   x000D      transform  rotate 360deg   x000D      x000D    x000D   rotating   x000D    -webkit-animation  rotating 2s linear infinite  x000D    -moz-animation  rotating 2s linear infinite  x000D    -ms-animation  rotating 2s linear infinite  x000D    -o-animation  rotating 2s linear infinite  x000D    animation  rotating 2s linear infinite  x000D    x000D   lt div  x000D    class  rotating  x000D    style  width  100px  height  100px  line-height  100px  text-align  center    x000D    gt Rotate lt  div gt  x000D   x000D   x000D

User · Answer

keyframes rotate       100            transform  rotate 1turn            div     animation  rotate 4s linear infinite

User · Answer

Working nice    x000D   x000D   test   x000D      width  11px  x000D      height  14px  x000D      background  url  data image gif base64 R0lGOD lhCwAOAMQfAP    7  vj4 Hh4eHd3d v7  Dw8HV1dfLy8ubm5vX19e3t7fr 6 nl5edra2nZ2dnx8fMHBwYODg b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6    yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX o9imAsB tKpxKRd1 YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7    x000D    x000D   x000D   -webkit-keyframes rotating   x000D      from  x000D          -webkit-transform  rotate 0deg   x000D        x000D      to  x000D          -webkit-transform  rotate 360deg   x000D        x000D    x000D   x000D   rotating   x000D      -webkit-animation  rotating 2s linear infinite  x000D    x000D   lt div id  test  class  rotating  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Without any prefixes  e g  at it s simplest    loading-spinner     animation  rotate 1 5s linear infinite      keyframes rotate     to       transform  rotate 360deg

User · Answer

Rotation on add class  active     myClassName active                   -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

User · Answer

lt style gt  div          height 200px       width 200px       -webkit-animation  spin 2s infinite linear         -webkit-keyframes spin       0    -webkit-transform  rotate 0deg        100   -webkit-transform  rotate 360deg           lt  style gt   lt  head gt    lt body gt   lt div gt  lt img src  1 png  height  200px  width  200px   gt  lt  div gt   lt  body gt

[css] CSS endless rotation animation

Infinite rotation animation in CSS

Examples related to css

Examples related to animation

Examples related to webkit