在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 маркира снимка и след това щракна върху бутона,ани()функцияRun, който е дефиниран в скрипта, написан по-горе.Във функцията ani() е инструктирано да получиid=”нещо”Елементи.В HTML частта има дял с този идентификатор, така че се извиква от скрипта.Сега кодът ще има файл с имеклас на име на класВмъкнете в секцията, дефинирана в CSS по-горе, която съдържа цялата информация за анимацията.Следователно, докато се щракне върху бутона, функцията ani() ще бъде извикана и класът със свойства на анимация ще бъде извикан в дяла с id=”нещо”.
