animate - Establezca el parámetro webkit-keyframes from/to con JavaScript
keyframes css (5)
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);
Solo agrega una definición de estilo al encabezado. Sería mucho más limpio / mejor definirlo a través del DOM si es posible.
Editar: Error en Chrome con el método anterior
¿Hay alguna forma de establecer el from o to un marco clave webkit con JavaScript?
Para resolver esto, agregué un ''nombre de animación webkit'' a mi selector de 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 usando jQuery:
$("#link").click(function(event) {
event.preventDefault();
$(".spinner").css("-webkit-animation-name", "spinnerColorYellow");
});
La forma en que manejo esto es no establecer el estilo de elemento desde o hacia el que estoy manipulando en el archivo css y antes de 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);
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>
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);
}