Animación de giro CSS3

Nuestros investigadores estrellas agotaron sus depósitos de café, investigando diariamente por la solución, hasta que Andrea halló el hallazgo en GitHub y ahora la compartimos contigo.

Solución:

Para usar Animación CSS3, también debe definir los fotogramas clave de animación reales (que nombraste 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 usando el @keyframes en-regla. Cada fotograma clave describe cómo debe 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);

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

De hecho, puedes hacer muchas cosas geniales con esto. Aquí hay uno que hice antes.

🙂

nótese bien Puede evitar tener que escribir todos los prefijos si usa -prefix-libre.

A partir de la última versión de Chrome/FF y en IE11, no hay necesidad de -ms/-moz/-webkit prefix. 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/

Puntuaciones y comentarios

Te invitamos a añadir valor a nuestra información cooperando tu experiencia en las anotaciones.

---

---

Utiliza Nuestro Buscador