在sa CSSSumulat ng animation codeKaysa sasa jqueryMas madali.Ngunit ang limitasyon ng CSS ay hindi ito interactive.Hindi ito matatawag sa pag-click sa pindutan tulad ng magagawa mo sa jquery.Ngunit mayroong isang trick upang ihalo ang Javascript sa CSS at gamitin ang onclick javascript function upang tawagan ang CSS animation function.
Una ay ang stylesheet:
.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';
}
At sa wakas ang HTML:Paano ito gumagana:
Tag ng HTML ang isang larawan, pagkatapos ay i-click ang button,ani()functionrun, na tinukoy sa script na nakasulat sa itaas.Sa function ani() ito ay inutusang kumuhaid="something"Mga elemento.Sa bahagi ng HTML, mayroong isang seksyon na may id na iyon, kaya tinawag ito ng script.Ngayon, lilikha ang code ng isang file na tinatawagklase ng classnameIpasok sa seksyong tinukoy sa itaas sa CSS, na naglalaman ng lahat ng impormasyon tungkol sa animation.Kaya't sa tuwing na-click ang pindutan, ang function ani() ay tinatawag at ang klase na may animated na ari-arian ay tinatawag sa partition na may id="something".
