keyframes examples ejemplos avanzadas animaciones css3 css-animations

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

Example


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