Jak zrobić nieskończoną rotację animacji w webkitcie.

Chcę wykonać obrót mojej ikony ładowania za pomocą CSS.Jak zrobić nieskończoną rotację animacji w webkitcie.

Mam ikonę i następujący kod:

<style> 
#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; 
} 
</style> 

<div id='test' class='rotating'></div>

Ale to nie działa. Jak można obracać ikonę za pomocą CSS?

Źródło

2011-06-20 Alexander Ruliov

utworzone rozwiązanie - http://jsfiddle.net/LwwfG/ odpowiedź proszę, aby zamknąć pytanie. –

Możesz dodać własną odpowiedź. Dołącz do niego kod z wnętrza demo jsFiddle. – thirtydot

Dzięki. Nie widziałem przycisku, aby wysłać własną odpowiedź. –

166

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

<div 
 
    class="rotating" 
 
    style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 
>Rotate</div>

Źródło

2014-01-23 22:26:27

jedno pytanie, to '-moz-' i '-ms- 'przedrostki niezbędne w' -webkit-keyframes'? ponieważ tylko webkit odczyta '-webkit-keyframes' i wierzę, że można je bezpiecznie usunąć. – Bor691

Czy mam rację, rozumiejąc, że nie jest to teoretycznie doskonałe, ponieważ właściwości nieprzedstawione przez producenta powinny być zawsze ostatnie, aby nie przesłonić zachowania zgodnego z normami? Zobacz: http://css-tricks.com/ordering-css3-properties/ – Ricky

@Ricky ur prolly right, pls edit –

Praca ładny:

#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; 
 
}

<div id='test' class='rotating'></div>

Źródło

2011-06-20 12:12:53

Czy istnieje rozwiązanie crossssrowser css? – andrej

@ andrej właśnie dodał jeden –

Jak dodać ten przykład na żywo? Och, znalazłem: https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – Grezzo

/* 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; 
 
}

<span class="spinner rotate"></span>

Źródło

2017-04-09 23:40:41

<style> 
div 
{ 
    height:200px; 
    width:200px; 
    -webkit-animation: spin 2s infinite linear;  
} 
@-webkit-keyframes spin { 
    0% {-webkit-transform: rotate(0deg);} 
    100% {-webkit-transform: rotate(360deg);} 
} 

</style> 
</head> 

<body> 
<div><img src="1.png" height="200px" width="200px"/></div> 
</body>

Źródło

2017-06-29 06:06:25

Jak zrobić nieskończoną rotację animacji w webkitcie.

Odpowiedz

Powiązane problemy