CSS 애니메이션 방향 속성
기본값은 정상입니다. 애니메이션을 실행할 때마다 시작 상태로 재설정되고 다시 시작됩니다.
애니메이션 방향 속성 특성:
| 초기값 |
정상 |
| 적용 | 모든 요소,
::before 및 ::after 의사 요소에도 적용됩니다. || 상속 | 아니요 |
| 애니메이션 가능 | 아니요 |
| 버전 | CSS3 |
| 자바스크립트 구문 |
object.style.animationDirection = "reverse" |통사론:
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
값:
값
설명
정상
기본값입니다. 애니메이션을 실행할 때마다 시작 상태로 재설정되고 다시 시작됩니다.
뒤집다
이 값을 사용하면 애니메이션이 뒤로 재생됩니다. 애니메이션을 실행할 때마다 끝으로 재설정되고 다시 시작됩니다.
번갈아 하는
이 값은 먼저 애니메이션을 앞으로 이동한 다음 뒤로 이동합니다.
교대 역방향
처음에는 애니메이션이 뒤로 이동한 다음 앞으로 이동합니다.
초기의
속성을 기본값으로 설정할 수 있습니다.
계승하다
부모 요소에서 속성을 상속합니다.
animation-direction 속성의 예:
여기에서는 normal 값으로 animation-direction을 사용하는 코드를 보여드리겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: normal;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays backwards.</p>
<div></div>
</body>
</html>
결과:
위의 코드를 실행하면 아래 이미지와 같은 출력을 얻을 수 있습니다.
애니메이션 방향 속성"reverse" 값이 있는 animation-direction 속성의 예:
다음 코드에서는 animation-direction 속성을 반전 값과 함께 사용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #9D0101;
position: relative;
animation: myfirst 5s 1;
animation-direction: reverse;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #FD8F01;
left: 200px;
top: 0px;
}
50% {
background: #01BA02;
left: 200px;
top: 200px;
}
75% {
background: #01865E;
left: 0px;
top: 200px;
}
100% {
background: #014686;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>In this example the animation plays as reverse.</p>
<div></div>
</body>
</html>
결과:
위의 코드를 실행하면 아래 이미지와 같은 결과를 얻을 수 있습니다.
반전 값이 있는 애니메이션 방향"alternate" 값이 있는 animation-direction 속성의 예:
다음 코드는 대체 값이 있는 animation-direction 속성을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #5457C4;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate;
}
@keyframes myfirst {
0% {
background: #7301D0;
left: 0px;
top: 0px;
}
25% {
background:#BF01BD;
left: 200px;
top: 0px;
}
50% {
background: #BF0129;
left: 200px;
top: 200px;
}
75% {
background: #480D19;
left: 0px;
top: 200px;
}
100% {
background: #BABF01;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays first forwards, then backwards.</p>
<div></div>
</body>
</html>
결과:
위의 코드를 실행하면 아래 이미지와 같은 출력을 얻을 수 있습니다.
대체 값이 있는 애니메이션 방향"alternate-reverse" 값이 있는 animation-direction 속성의 예:
이 코드에서는alternate-reverse 값으로 animation-direction 속성을 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #5457C4;
position: relative;
animation: myfirst 5s 1;
animation-direction: alternate-reverse;
}
@keyframes myfirst {
0% {
background: #7301D0;
left: 0px;
top: 0px;
}
25% {
background: #BF01BD;
left: 200px;
top: 0px;
}
50% {
background: #BF0129;
left: 200px;
top: 200px;
}
75% {
background: #480D19;
left: 0px;
top: 200px;
}
100% {
background: #BABF01;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays backwards, then forwards.</p>
<div></div>
</body>
</html>
결과:
애니메이션 방향 속성브라우저 지원:
브라우저 지원미리 읽기:
Code Tag 게시물 CSS animation-direction property이 Share Point Anchor에 처음 나타났습니다.
Reference
이 문제에 관하여(CSS 애니메이션 방향 속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/anchorshare/css-animation-direction-property-2f85텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
