CSS3 애니메이션 속성
번역 결과：
영어 [ˌænəˈmeʃn] 미국 [ˌænəˈmeʃən]
n. 애니메이션 제작, 애니메이션 촬영 [영화 및 TV] 애니메이션
복수형: 애니메이션
CSS3 애니메이션 속성통사론
기능: animation 속성은 6개의 애니메이션 속성을 설정하는 데 사용되는 단축 속성입니다.
구문: animation: 이름 기간 타이밍-함수 지연 반복-카운트 방향.
설명: animation-name은 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다. . animation-duration은 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다. animation-timing-function은 애니메이션의 속도 곡선을 지정합니다. animation-delay는 애니메이션이 시작되기 전의 지연을 지정합니다. animation-iteration-count는 애니메이션이 재생되어야 하는 횟수를 지정합니다. animation-direction은 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.
참고: 항상 animation-duration 속성을 지정하세요. 그렇지 않으면 지속 시간이 0이 되고 애니메이션이 재생되지 않습니다.
css3 애니메이션 속성은 6가지 애니메이션 속성을 설정하여 애니메이션 효과를 구현하는 단축 속성입니다. 이러한 6가지 속성은 애니메이션 이름, 애니메이션 시간, 속도 곡선, 애니메이션 지연, 재생 시간 및 애니메이션 역방향 재생 여부입니다.
CSS3 애니메이션 속성예
<!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>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요