JavaScriptを使用したCSSアニメーション

Question

JavaScriptを学び始めたばかりで、アナログ時計を作ろうとしています。まず、私はcssで2番目のメーターを作成しました。それからJavaScriptに変換しようとしています。私はこのためにjQueryやその他のJSフレームワークを使用したくありません。

JavaScriptでcss @keyframeを設定するにはどうすればよいですか？ここではCSSのための私のコードは次のようになります。この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コード

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要素に追加するだけです。フラグを設定するか、タグを後で見つけて2回追加することを避けるために、クラスにタグを付けるだけです。

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

わからない上にそれを壊すというし、1行に多くのことを宣言することができ、素晴らしいリソースですバニラのjavascriptでキーフレームを作成しようとしていますが、それらがcssで宣言されている場合、「スピン」はキーフレームを適用します。

PSバニラを学ぶには、計算機でJavaScriptを開始してください。