css3 - examples - text transition css
AnimaciĆ³n de giro CSS3 (6)
He revisado bastantes demos y no tengo idea de por qué no puedo hacer que el spin de CSS3 funcione. Estoy usando la última versión estable de Chrome.
El violín: 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>
A partir de la última versión de Chrome / FF y en IE11, no es necesario el prefijo -ms / -moz / -webkit. Aquí hay un código más corto (basado en respuestas anteriores):
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);}
}
Demostración en vivo: http://jsfiddle.net/9Ryvs/3057/
HTML con glyphicon impresionante de la fuente.
<span class="fa fa-spinner spin"></span>
CSS
@-moz-keyframes spin {
to { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(359deg); }
}
@keyframes spin {
to {transform:rotate(359deg);}
}
.spin {
animation: spin 1000ms linear infinite;
}
No ha especificado ningún fotograma clave. Lo hice funcionar aquí .
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);}
}
En realidad puedes hacer muchas cosas geniales con esto. Aquí hay uno que hice antes .
:)
NB Puede omitir tener que escribir todos los prefijos si usa -prefix-free .
Para completar, aquí hay un ejemplo de Sass / Compass que realmente acorta el código, el CSS compilado incluirá los prefijos necesarios, 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))
Para girar, puede usar fotogramas clave y una transformación.
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);
}
}
Para usar la Animación CSS3, también debe definir los fotogramas clave de la animación real ( que denominó spin
)
Lea https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations para obtener más información
Una vez que haya configurado el tiempo de la animación, debe definir la apariencia de la animación. Esto se hace estableciendo dos o más fotogramas clave utilizando
@keyframes
at-rule. Cada fotograma clave describe cómo debería renderizarse el elemento animado en un momento dado durante la secuencia de animación.
Demostración en 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);}
}