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