How to do a webkit css endless rotation-animation.

问题:

I want to make a rotation of my loading icon by CSS.

I have an icon and the following code:

But it doesn't work. How can the icon be rotated using CSS?

回答1:

@-webkit-keyframes rotating /* Safari and Chrome */ {   from {     -webkit-transform: rotate(0deg);     -o-transform: rotate(0deg);     transform: rotate(0deg);   }   to {     -webkit-transform: rotate(360deg);     -o-transform: rotate(360deg);     transform: rotate(360deg);   } } @keyframes rotating {   from {     -ms-transform: rotate(0deg);     -moz-transform: rotate(0deg);     -webkit-transform: rotate(0deg);     -o-transform: rotate(0deg);     transform: rotate(0deg);   }   to {     -ms-transform: rotate(360deg);     -moz-transform: rotate(360deg);     -webkit-transform: rotate(360deg);     -o-transform: rotate(360deg);     transform: rotate(360deg);   } } .rotating {   -webkit-animation: rotating 2s linear infinite;   -moz-animation: rotating 2s linear infinite;   -ms-animation: rotating 2s linear infinite;   -o-animation: rotating 2s linear infinite;   animation: rotating 2s linear infinite; }

Rotate

回答2:

Working nice:

#test {     width: 11px;     height: 14px;     background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7'); }  @-webkit-keyframes rotating {     from{         -webkit-transform: rotate(0deg);     }     to{         -webkit-transform: rotate(360deg);     } }  .rotating {     -webkit-animation: rotating 2s linear infinite; }

回答3:

/* ENDLESS ROTATE */ .rotate{   -webkit-animation: rotate 1.5s linear infinite;            animation: rotate 1.5s linear infinite;  } @-webkit-keyframes rotate{ to{-webkit-transform: rotate(360deg); } } @keyframes         rotate{ to{        transform: rotate(360deg); } }    /* SPINNER JUST FOR DEMO */ .spinner{   display:inline-block; width: 50px; height: 50px;   border-radius: 50%;   box-shadow: inset -2px 0 0 2px #0bf; }

回答4:

文章来源: How to do a webkit css endless rotation-animation.