Establezca los fotogramas clave de web desde/para el parámetro con JavaScript

¿Hay alguna manera de configurar from o to de un webkit-keyframe con JavaScript?Establezca los fotogramas clave de web desde/para el parámetro con JavaScript

Fuente

2010-07-25 Ricardo

También estoy interesado en esto. Creo que quiere definir la animación (@ -webkit-keyframes para webkit) de Javascript. Spec: http://www.w3.org/TR/css3-animations/ –

Recién notado en la parte inferior de esa especificación, hay una interfaz DOM para esto, citada como "La animación CSS está expuesta a la CSSOM a través de un par de nuevas interfaces que describen los fotogramas clave ". ¿Alguien sabe cómo se accede/utiliza a través de Javascript? –

@ adam-heath: consulte mi respuesta para ver un ejemplo del uso de la interfaz DOM. –

una solución de tipo:

var cssAnimation = document.createElement('style'); 
cssAnimation.type = 'text/css'; 
var rules = document.createTextNode('@-webkit-keyframes slider {'+ 
'from { left:100px; }'+ 
'80% { left:150px; }'+ 
'90% { left:160px; }'+ 
'to { left:150px; }'+ 
'}'); 
cssAnimation.appendChild(rules); 
document.getElementsByTagName("head")[0].appendChild(cssAnimation);

sólo añade una definición de estilo a la cabecera. Sería mucho más limpio/mejor definirlo a través del DOM si es posible.

Editar: Error en cromo con el método antiguo

Fuente

2010-07-26 11:20:26

¿Por qué no usas la API CSSOM en su lugar? –

Para resolver este añadí un 'webkit nombre de la animación' a mi selector CSS y luego creó reglas separadas para mis opciones, en mi ejemplo colorante rojo y amarillo:

.spinner { 
-webkit-animation-name: spinnerColorRed; 
} 

@-webkit-keyframes spinnerColorRed { 
    from { 
    background-color: Black; 
    } 
    to { 
    background-color: Red; 
    } 
} 

@-webkit-keyframes spinnerColorYellow { 
    from { 
    background-color: Black; 
    } 
    to { 
    background-color: Yellow; 
    } 
}

Luego, utilizando jQuery:

$("#link").click(function(event) { 
    event.preventDefault(); 
    $(".spinner").css("-webkit-animation-name", "spinnerColorYellow"); 
});

Fuente

2011-06-11 20:56:27

No use jQuery donde no sea necesario ... Y este es el caso donde no lo es. – m93a

a mi modo de manejar esto es no fijar bien el origen o destino del elemento de estilo que estoy manipulando en el archivo CSS y ant Al activar la animación, estableceré el estilo del elemento al que debería ir con javascript. De esta manera, usted es libre de administrar dinámicamente lo que debe hacer hasta que podamos administrar esto directamente en js. Solo necesita especificar uno de los dos. El setTimeout permite la aplicación de la regla css al elemento antes de que se active la animación; de lo contrario, tendrías una condición de carrera y no se animaría.


#someDiv.slideIn { 
    -webkit-animation: slideIn 0.5s ease; 
} 

@-webkit-keyframes slideIn { 
    0% { 
     left:0px; 
    } 

    100% {} 
} 


var someDiv = document.getElementById('someDiv'); 
someDiv.style.left = '-50px'; 
setTimeout(function(){ 
    someDiv.addClass('slideIn'); 
},0);

Fuente

2011-07-05 19:45:55 mroy

Puede usar la interfaz CSS DOM. Por ejemplo:

<html> 
    <body> 
     <style> 
     @keyframes fadeout { 
      from { opacity:1; } 
      to { opacity:0; } 
     } 
     </style> 
     <script text="javascript"> 
      var stylesheet = document.styleSheets[0]; 
      var fadeOutRule = stylesheet.cssRules[0]; 
      alert(fadeOutRule.name); // alerts "fadeout" 

      var fadeOutRule_From = fadeOutRule.cssRules[0]; 
      var fadeOutRule_To = fadeOutRule.cssRules[1]; 
      alert(fadeOutRule_From.keyText); // alerts "0%" (and not "from" as you might expect) 
      alert(fadeOutRule_To.keyText); // alerts "100%" 

      var fadeOutRule_To_Style = fadeOutRule_To.style; 

      alert(fadeOutRule_To_Style.cssText); // alerts "opacity:0;" 

      fadeOutRule_To_Style.setProperty('color', 'red'); // add the style color:red 
      fadeOutRule_To_Style.removeProperty('opacity'); // remove the style opacity 

      alert(fadeOutRule_To_Style.cssText); // alerts "color:red;" 
     </script> 
    </body> 
</html>

Fuente

2012-11-16 20:05:53

+1 para los pasos claros en los niveles DOM. – cdehaan

Este ejemplo cubre varios navegadores diferentes:

var keyFramePrefixes = ["-webkit-", "-o-", "-moz-", ""]; 
var keyFrames = []; 
var textNode = null; 

for (var i in keyFramePrefixes){ 

keyFrames = '@'+keyFramePrefixes[i]+'keyframes cloudsMove {'+ 
'from {'+keyFramePrefixes[i]+'transform: translate(0px,0px);}'+ 
'to {'+keyFramePrefixes[i]+'transform: translate(1440px' 
'px,0px);}}'; 

textNode = document.createTextNode(keyFrames); 
document.getElementsByTagName("style")[0].appendChild(textNode); 
}

Fuente

2014-12-08 02:24:51

Establezca los fotogramas clave de web desde/para el parámetro con JavaScript

Respuesta

Cuestiones relacionadas