在CSSEscrever código de animaçãoQue emjqueryMais fácil.Mas a limitação do CSS é que ele não é interativo.Ele não pode ser chamado quando o botão é clicado como no jquery.Mas há um truque para misturar Javascript com CSS e usar a função onclick javascript para chamar a função de animação CSS.
A primeira é a folha de estilo:
.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';
}
Finalmente, HTML:Como funciona:
HTML marcou uma imagem e, em seguida, clicou no botão,ani ()funçãoExecutar, que é definido no script escrito acima.Na função ani (), ele é instruído a obterid = ”algo”Elementos.Na parte HTML, existe uma partição com esse id, por isso é chamada pelo script.Agora, o código terá um arquivo chamadonome da classe da classeInsira na seção definida no CSS acima, que contém todas as informações sobre a animação.Portanto, enquanto o botão for clicado, a função ani () será chamada e a classe com propriedades de animação será chamada na partição com id = ”alguma coisa”.
