Cómo activar una animación de CSS3 (webkit) usando javascript?

Estoy realmente atascado. Quiero una animación CSS que he creado (a continuación) para activar al hacer clic en un div. La única forma en que pensé que podía hacerlo fue usando javascript para crear un evento onClick. Sin embargo, no sé cómo ejecutar/refrence la animación que está en mi archivo css. ¿Alguien puede ayudarme?Cómo activar una animación de CSS3 (webkit) usando javascript?

Esta es la animación en mi archivo css que quiero ejecutar haciendo clic en un div.

@-webkit-keyframes colorchange { 
0% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
33% { 
    background-color: blue; 
    opacity: 0.75; 
    -webkit-transform: scale(1.1) rotate(-5deg); 
} 
67% { 
    background-color: green; 
    opacity: 0.5; 
    -webkit-transform: scale(1.1) rotate(5deg); 
} 
100% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
}

Incluso he intentado poner el CSS en el mismo fichero que el Javascript (index.html) y se utiliza el código siguiente para tratar de activarlo en clic, pero no hubo suerte.

<script> 
function colorchange(test) 
{ 
test.style.webkitAnimationName = 'colorchange '; 
} 
</script>

Por favor ayuda :)

Fuente

2010-12-05 user531192

Te estás perdiendo el tiempo y que tiene un espacio al final en el nombre que se asigna:

function colorchange(test) 
{ 
    test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed 
    test.style.webkitAnimationDuration = '4s'; 
}

Algunos más informaciones sobre @-webkit-keyframes:
http://webkit.org/blog/324/css-animation-2/

actualización

Algún código de trabajo.

<html> 
    <head> 
    <style> 
    @-webkit-keyframes colorchange { 
    0% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    33% { 
     background-color: blue; 
     opacity: 0.75; 
     -webkit-transform: scale(1.1) rotate(-5deg); 
    } 
    67% { 
     background-color: green; 
     opacity: 0.5; 
     -webkit-transform: scale(1.1) rotate(5deg); 
    } 
    100% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    } 
    </style> 

    <script> 
    function colorchange(e) { 
     if (e.style.webkitAnimationName !== 'colorchange') { 
      e.style.webkitAnimationName = 'colorchange'; 
      e.style.webkitAnimationDuration = '4s'; 

      // make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect 
      setTimeout(function() { 
       e.style.webkitAnimationName = ''; 
      }, 4000); 
     } 
    } 
    </script> 
    </head> 

    <body> 
     <div onclick="colorchange(this)">Hello World!</div> 
    </body> 
</html>

Fuente

2010-12-05 13:15:13

Gracias por eso, no vi el espacio final. Pero todavía tengo el problema. si hago esto, por ejemplo: test.style.height = "50px"; se animará y funcionará, sin embargo, si intento llamar a una animación personalizada que he predefinido al hacer esto: test.style.webkitAnimationName = 'cambio de color'; nada funciona en absoluto. Alguna idea sobre eso? – user531192

¿Ha establecido la duración? No funcionará sin uno. Probé las cosas localmente con su CSS anterior y funcionó. –

Sí, tengo una duración, y la animación funciona bien si la asigno a css. Pero simplemente no puedo hacer que funcione cuando intento javascript onclick para hacerlo funcionar. (el onclick funciona). ¿Lo conseguiste trabajando con un clic? – user531192

Cómo activar una animación de CSS3 (webkit) usando javascript?

Respuesta

Cuestiones relacionadas