transition, animation은 자바스크립트의 도움 없이 요소에 직접 애니메이션 효과를 적용하는 속성

transition

이벤트로 요소의 상태가 변하면 애니메이션을 실행함.
속성 값이 수치 인 것만 가능함.

• 따로 주기

transition-property: all;
transition-duration: 1s;
transition-delay: 0.5s;
transition-timing-function: ease;

• 한번에 주기

transition: all 1s 0.5s ease;
(duration, delay 순서를 반드시 지켜야함.)

animation

transition과 다르게 사용자의 이벤트(click, scroll..) 없이 화면이 load되면 바로 시작 함.
횟수, 진행방향 등을 설정할 수 있음.
@keyframes을 사용하여 각 프레임의 스타일을 정의할 수 있음.

@keyframes

from 속성이나 0% 속성에 설정한 스타일에서 출발해,
to 속성이나 100% 속성에 설정한 스타일로 점차 바뀌면서 애니메이션이 실행됨.

@keyframes animationName {
    from {
        css-styles;
    }
    to {
        css-styles;
    }
}

0%와 100% 사이에는 중간 값(%)을 자유롭게 설정할 수 있음.

@keyframes move {
    0% {
        top: 0px;
    }
    25% {
        top: 20px;
    }
    75% {
        top: 50px;
    }
    100% {
        top: 100px;
    }
}

• 따로 주기

animation-name: change;
animation-duration: 1s;
animation-delay: 0.1s;
animation-iteration-count: 3;
animation-timing-function: ease;
animation-direction: reverse;
animation-fill-mode: forwards;

• 한번에 주기

animation: change 1s 0s 3 ease reverse forwards;