Ustawianie wartości klatek kluczowych Webkit przy użyciu zmiennej JavaScript
Mam fragment kodu JS do generowania liczb losowych i wyprowadzania ich jako zmiennych do wykorzystania tutaj w miejsce wartości rotacji
<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>
Powyższy kod działa jednak dobrze, gdy próbuję włożyć zmienne z javascript dorotate(variable);
Nie mogę go uruchomić. Jestem nowy w tej kwestii, więc mam 90% pewności, że po prostu nie mam poprawnej składni dla zmiennej (poważnie jestem straszny, gdy pamiętam, czy coś potrzebuje nawiasów, cudzysłowów, squigglys itp. I próbowałem wszystkiego, o czym mogę myśleć) .
Może to być spowodowane tym, że zmienna jest lokalna względem funkcji, a CSS nie może jej odczytać.
Tak więc po prostu potrzebuję jakiegoś nieznajomego, aby powiedzieć mi poprawną składnię i jak uzyskać CSS do odczytania zmiennej, jeśli to możliwe.
W przeciwnym razie wygląda na to, że będę potrzebować funkcji do utworzenia całości:
<code>@-webkit-keyframes rotate { 0% {-webkit-transform: rotate(-10deg);} 100% {-webkit-transform: rotate(10deg);} } </code>
... co może być trochę chaotyczne, ponieważ zmienna losowa będzie prawdopodobnie stosowana do wielu elementów css.
Aha i obecnie zmienna jest sformatowana tak, aby zawieraładeg
po numerze, więc to nie jest problem. W rzeczywistości dla ułatwienia załóżmy, że używam var dogValue = "20deg"; i zapomnij o losowym elemencie.
Dzięki.