在CSSSchrijf animatiecodeDan injqueryMakkelijker.Maar de beperking van CSS is dat het niet interactief is.Het kan niet worden aangeroepen wanneer op de knop wordt geklikt, zoals bij het gebruik van jQuery.Maar er is een truc om Javascript en CSS te combineren en de onclick javascript-functie te gebruiken om de CSS-animatiefunctie aan te roepen.
De eerste is de 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';
}
Eindelijk, HTML:Hoe het werkt:
HTML markeerde een afbeelding en klikte vervolgens op de knop,ani()functieUitvoeren, dat is gedefinieerd in het hierboven geschreven script.In de functie ani(), wordt de opdracht gegeven om te krijgenid="iets"elementen.In het HTML-gedeelte is er een partitie met die id, dus deze wordt aangeroepen door het script.Nu heeft de code een bestand met de naamklasnaam van klasInvoegen in de sectie gedefinieerd in CSS hierboven, die alle informatie over de animatie bevat.Daarom wordt, zolang op de knop wordt geklikt, de functie ani() aangeroepen en wordt de klasse met animatie-eigenschappen in de partitie aangeroepen met id=”something”.
