영어 [ˌænəˈmeʃən] 미국 [ˌænəˈmeʃən]

n. 애니메이션 제작, 애니메이션 촬영 [영화 및 TV] 애니메이션

복수형: 애니메이션

CSS 애니메이션 속성 통사론

애니메이션 속성을 어떻게 사용하나요?

animation 속성은 6개의 애니메이션 속성을 설정하는 데 사용되는 축약형 속성입니다. , 6개의 애니메이션 속성을 설정하는 데 사용됩니다.
구문: ​​

animation: 이름 기간 타이밍-함수 지연 반복-카운트 방향;

설명:

animation-name은 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다. animation-duration은 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다. animation-timing-function은 애니메이션의 속도 곡선을 지정합니다. animation-delay는 애니메이션이 시작되기 전의 지연을 지정합니다. animation-iteration-count는 애니메이션이 재생되어야 하는 횟수를 지정합니다. animation-direction은 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.​
참고:

항상 animation-duration 속성을 지정하세요. 그렇지 않으면 지속 시간이 0이 되고 애니메이션이 재생되지 않습니다.

CSS 애니메이션 속성 예

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요