在CSS 中編寫動畫代碼比在jquery 中更容易。但是 CSS 的局限性在於它不是交互式的。不能像使用 jquery 那樣在單擊按鈕時調用它。但是有一個技巧可以將 Javascript 與 CSS 混合併使用 onclick javascript 函數調用 CSS 動畫函數。
首先是樣式表：
.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=”something”的元素。在 HTML 部分，有一個具有該 id 的分區，因此它被腳本調用。現在，代碼將一個名為classname 的類插入到上面在 CSS 中定義的分區中，其中包含有關動畫的所有信息。因此，只要單擊按鈕，就會調用函數 ani() 並將具有動畫屬性的類調用到 id=”something” 的分區中。
