CSS-анимация с JavaScript

Question

Я только начал изучать JavaScript и пытаюсь сделать аналоговые часы. Сначала я создал второй метр с css. Затем я пытаюсь преобразовать его в JavaScript. Я не хочу использовать jQuery или любую другую инфраструктуру JS для этого.

Как установить css @keyframe в JavaScript? Вот мой код CSS:

.second{ 
    height: 5px; 
    width: 180px; 
    background-color: #aaaaaa; 
    border-radius: 5px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 60s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -o-transition: rotate(360deg); 
    transform-origin: left center; 
    z-index: 3; 
} 

@keyframes spin { 
    from {transform:rotate(0deg);} 
    to {transform:rotate(360deg);} 
} 

JS код для этого CSS

var second = document.querySelector(".second"); 
     second.style.height = "5px"; 
     second.style.width = "180px"; 
     second.style.backgroundColor = "#aaaaaa"; 
     second.style.borderRadius = "5px"; 
     second.style.position = "absolute"; 
     second.style.top = "50%"; 
     second.style.left = "50%"; 
     second.style.transformOrigin = "left center"; 
     second.style.zIndex = "3"; 

     second.style.webkitAnimationName = "Spin"; 
     second.style.webkitAnimationDuration = "60s"; 
     second.style.webkitAnimationIterationCount: "infinite"; //doesn't work 
     second.style.webkitAnimationTimingFunction: "linear"; //doesn't work 
     second.style.oTransition: "rotate(360deg)"; //doesn't work 

Answer 1

Это может быть тривиальным достигается путем добавления желаемого текста (@keyframes закрутить правило) к стилю тегу в документе . Я не потрудился сделать чек, чтобы проверить, выполнено ли это еще раз, поэтому нажатие кнопки несколько раз добавит правило несколько раз. Для работы требуется по крайней мере 1 тег стиля, используемый тег является последним, и, наконец, это произойдет, если последний тег стиля ссылается на внешний файл.

Чтобы тривиально избежать этих ограничений, вы можете просто создать новый элемент сценария и добавить его в элемент document.head. Вам просто нужно установить флаг или дать тегу класс, чтобы вы могли его найти позже, и не добавляйте его дважды.

function allByTag(tagName,parent){return (parent == undefined ? document : parent).getElementsByTagName(tagName);} 
 

 
function onStart() 
 
{ 
 
\t var styleTags = allByTag('style'); 
 
\t var lastStyleElem = styleTags[ styleTags.length-1 ]; 
 
\t 
 
\t var txt = '@keyframes spin {' + '\n'; 
 
\t \t txt += ' from {transform:rotate(0deg);}' + '\n'; 
 
\t \t txt += ' to {transform:rotate(360deg);}' + '\n'; 
 
\t \t txt += '}' + '\n'; 
 
\t lastStyleElem.innerHTML += txt; 
 
}

.second{ 
 
    height: 5px; 
 
    width: 180px; 
 
    background-color: #aaaaaa; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-animation-name: spin; 
 
    -webkit-animation-duration: 60s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: linear; 
 
    -o-transition: rotate(360deg); 
 
    transform-origin: left center; 
 
    z-index: 3; 
 
}

<button onclick='onStart()'>Start transform</button> 
 
<div class='second'></div>

Answer 2

Я не могу думать о какой-либо причине, почему это было бы сделано в JavaScript, хотя там может быть. Я думаю, что если вы попытаетесь изучить JavaScript, изучающий реальную практику, может быть лучше. Но если вы, я полагаю, вы можете добавить его в элемент головы так.

var styleElement = document.createElement('style'); 
styleElement.type = 'text/css'; 
var props = 
'@-webkit-keyframes spin {' + 
    'from {' + 
    '-webkit-transform: rotate(0deg);' + 
      'transform: rotate(0deg); }' + 
    'to {' + 
    '-webkit-transform: rotate(360deg);' + 
      'transform: rotate(360deg); } }' + 
'@keyframes spin {' + 
    'from {' + 
    '-webkit-transform: rotate(0deg);' + 
      'transform: rotate(0deg); }' + 
    'to {' + 
    '-webkit-transform: rotate(360deg);' + 
      'transform: rotate(360deg); } }'; 
styleElement.appendChild(props); 
document.getElementsByTagName("head")[0].appendChild(styleElement); 

Answer 3

MDN большой ресурс, с анимацией вы можете объявить много на одной линии, а затем разбить его на 5 линий и т.д.

animation: spin 60s infinite linear;

https://developer.mozilla.org/en/docs/Web/CSS/animation

Не знаю, как вам собираются создавать ключевые кадры в ванильном javascript, но если они объявлены в css, «spin» применит ключевые кадры.

PS Если вы хотите изучить Vanilla JavaScript, начните с калькулятора.