在CSS애니메이션 코드 작성에서보다제이쿼리더 쉬움.그러나 CSS의 한계는 대화형이 아니라는 것입니다.jquery를 사용하는 것처럼 버튼을 클릭하면 호출할 수 없습니다.하지만 자바스크립트와 CSS를 섞어서 onclick 자바스크립트 함수를 사용하여 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;}
}
자바스크립트:
function ani(){
document.getElementById('something').className ='classname';
}
마지막으로 HTML:작동 방식:
HTML은 그림을 표시한 다음 버튼을 클릭하고,애니()기능위에 작성된 스크립트에 정의된 실행입니다.ani() 함수에서 다음을 얻도록 지시됩니다.아이디 = "무언가"집단.HTML 부분에는 해당 ID를 가진 파티션이 있으므로 스크립트에서 호출합니다.이제 코드에는클래스 클래스 이름애니메이션에 대한 모든 정보가 포함된 위의 CSS에 정의된 섹션에 삽입합니다.따라서 버튼을 클릭하는 한 ani() 함수가 호출되고 애니메이션 속성이 있는 클래스가 id="something"인 파티션으로 호출됩니다.
