在CSSSkryf animasiekodeAs injqueryMakliker.Maar die beperking van CSS is dat dit nie interaktief is nie.Dit kan nie genoem word wanneer die knoppie geklik word soos om jquery te gebruik nie.Maar daar is 'n truuk om Javascript met CSS te meng en die onclick-javascript-funksie te gebruik om die CSS-animasiefunksie te noem.
Die eerste is die stylblad:
.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';
}
Ten slotte, HTML:Hoe dit werk:
HTML het 'n prentjie gemerk en dan op die knoppie geklik,ani()funksieRun, wat gedefinieer word in die skrif wat hierbo geskryf is.In die funksie ani(), word dit opdrag gegee om te kryid = "iets"Elemente.In die HTML-deel is daar 'n partisie met daardie id, so dit word deur die skrif geroep.Nou sal die kode 'n lêer met die naam hêklas van klasnaamVoeg in die afdeling wat in CSS hierbo gedefinieer is, wat al die inligting oor die animasie bevat.Dus, solank as wat die knoppie geklik word, sal die funksie ani() geroep word en die klas met animasie-eienskappe sal in die partisie ingeroep word met id=”iets”.
