在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” 的分区中。
