でCSSアニメーションコードを書くよりもjqueryより簡単に。ただし、CSSの制限は、インタラクティブではないことです。jqueryのようにボタンがクリックされたときに呼び出すことはできません。ただし、JavascriptをCSSと混合し、onclickjavascript関数を使用してCSSアニメーション関数を呼び出すトリックがあります。
XNUMXつ目はスタイルシートです。
.classname
{
width:320px;
height:200px;
background:red;
animation:anyname 2s;
-moz-animation:anyname 2s; /* Firefox */
-webkit-animation:anyname 2s; /* Safari and Chrome */
animation-direction:alternate;
-moz-animation-direction:alternate;
-webkit-animation-direction:alternate;
animation-timing-function:linear;
-moz-animation-timing-function:linear; /* Firefox */
-webkit-animation-timing-function:linear; /* Safari and Chrome */
}
@keyframes anyname
{
from {margin-left:0px;}
to {margin-left:600px;}
}
@-moz-keyframes anyname /* Firefox */
{
from {margin-left:0px;}
to {margin-left:600px;}
}
@-webkit-keyframes anyname /* Safari and Chrome */
{
from {margin-left:0px;}
to {margin-left:600px;}
}
Javascript:
function ani(){
document.getElementById('something').className ='classname';
}
最後に、HTML：使い方：
HTMLで画像にマークを付け、ボタンをクリックして、ani（）関数上記のスクリプトで定義されている実行。関数ani（）では、取得するように指示されていますid =”何か”要素。HTML部分には、そのIDのパーティションがあるため、スクリプトによって呼び出されます。これで、コードには次の名前のファイルが含まれます。クラスのクラス名上記のCSSで定義されたセクションに挿入します。このセクションには、アニメーションに関するすべての情報が含まれています。したがって、ボタンがクリックされている限り、関数ani（）が呼び出され、アニメーションプロパティを持つクラスがid =” something”でパーティションに呼び出されます。
