본문 바로가기

Webstoryboy

Category

Explanation

REFERENCE/CSS

[CSS] animation-direction

animation-direction

animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.


animation-direction

animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.

정의(Definition)

  • animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.

문법(Syntax)

animation-direction : normal | reverse | alternate | alternate-reverse | inherit;

속성(Property)

속성값 설명
normal 애니메이션의 방향을 정상적(기본값)으로 설정합니다.
reverse 애니메이션 움직임의 방향을 역방향으로 설정합니다.
alternate 애니메이션 움직임의 방향을 순방향을 진행 후 역방향으로 설정합니다.
alternate-reverse 애니메이션 움직임의 방향을 역방향을 진행 후 순방향으로 설정합니다.
inherit 애니메이션 움직임을 상위 요소한테 상속받습니다.

Sample1

클릭하면 애니메이션 이동 방향을 표현한 animation direction 예제입니다.

CSS
.direction.normal {animation: move2 3s 10 ease normal;}
.direction.reverse {animation: move2 3s 10 ease reverse;}
.direction.alternate {animation: move2 3s 10 ease alternate;}
.direction.alternate-reverse {animation: move2 3s 10 ease alternate-reverse;}
@keyframes move2 {
    0%  {left:0; top:0;}
    25% {left: calc(100% - 70px); top:0;}
    50% {left: calc(100% - 70px); top: calc(100% - 70px);}
    75% {left: 0; top: calc(100% - 70px);}
    100%{left:0; top:0;}
}

호환성(Compatibility) 더보기

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
animation-direction 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • CSS Animations

AD

comments