Animation Concept

Loading...March 8, 2022

Concept

transform과 마찬가지로 element의 변화를 줄 수 있는데, animation은 중간 중간 마다 변화를 변경시킬 수 있다.
animation-duration을 지정해주어야 animation이 작동한다. 해당 값이 없으면 아무런 동작을 하지 않는다.

특정 구간 animation 변경

@keyframes 에서 가능하다.

Example

@keyframes rolling {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(100px, 0px);
    }
    50% {
        transform: translate(100px, 100px);
    }
    75% {
        transform: translate(0px, 100px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

무한 반복

둘 중 하나

animation: rolling 2s linear alternate infinite;
animation-iteration-count: infinite;

속도 조절

둘 중 하나

animation: rolling 2s linear alternate infinite;
animation-timing-function: linear;

에니메이션 방향

animation-direction: alternate;
animation-direction: reverse;
animation-direction: alternate-reverse;

에니메이션 종료 시점에 해당 요소가 위치한 지점에 머물게 하는 방법

animation-fill-mode: forwards

에니메이션 진행 중 일시 정지

animation-play-state: paused;