Establecer valores de fotogramas clave de Webkit utilizando la variable Javascript
Tengo un fragmento de código JS para generar números aleatorios y generarlos como variables para usar aquí en lugar de los valores de rotación
<code>@-webkit-keyframes rotate { 0% {-webkit-transform: rotate(-10deg);} 100% {-webkit-transform: rotate(10deg);} } #dog{ /*irrelevant settings*/ -webkit-animation: rotate 5s infinite alternate ease-in-out; } </code>
El código anterior funciona bien, sin embargo, cuando intento pegar las variables del javascript enrotate(variable);
No puedo hacer que funcione. Soy nuevo en esto, así que estoy 90% seguro de que no tengo la sintaxis adecuada para la variable (en serio, soy terrible para recordar si algo necesita corchetes, comillas, garabatos, etc. y he intentado todo lo que puedo pensar) .
O podría ser porque la variable es local a la función y CSS no puede leer eso.
Básicamente, solo necesito un extraño desconocido para decirme la sintaxis correcta y cómo obtener CSS para leer la variable si es posible.
De lo contrario, parece que necesitaré la función para crear la totalidad de:
<code>@-webkit-keyframes rotate { 0% {-webkit-transform: rotate(-10deg);} 100% {-webkit-transform: rotate(10deg);} } </code>
... lo que podría ser un poco desordenado ya que la variable aleatoria probablemente se aplicará a múltiples elementos css.
Ah, y actualmente la variable está formateada para incluir ladeg
Después del número para que no sea el problema. De hecho, por razones de facilidad, supongamos que estoy usando var dogValue = "20deg"; Y olvida el elemento aleatorio.
Gracias.