Animation

애니메이션 효과를 주는 방법은 두가지

transition

설정

transition-duration: n s;

애니메이션이 플레이되는 시간

transition-delay: n s;

말그대로 딜레이
n초 후에 transition 시작

transition-timing-function: ease;

애니메이션 가속도 설정
ease가 디폴트 값
linear는 등가속도 고정

transition: 2s 1s linear;

처럼 한줄에 쓰는 것도 가능

transition은 숫자값으로 설정된 속성에 모두 적용 가능

animation

설정

@keyframes name{}

애니메이션 실행시 설정값
0

100%, from

to 값으로 키프레임 설정가능

animation-name : n;

n자리에는 @keyframes에서 설정해둔 name값을 넣어 작동시킴

animation-duration: n s;

애니메이션 실행시간

animation-delay: n s;

딜레이 시간 n초후 애니메이션 실행

animation-direction: nomal;

애니메이션 재생 방향
nomal : 디폴트
reverse : 역방향
alternate : 갔다가 돌아옴
alternat-reverse : 역방향에서 시작 돌아옴

animation-timing-function: ease;

애니메이션 등가속도 설정
transition-timing-function과 동일

animation-iteration-count: n;

애니메이션 반복 설정 n번만큼
infinite하면 무한 반복

animation-play-state: running;

running : 디폴트
paused : 멈춤
hover와 같이 사용하는 등

animation-fill-mode: none;

fowards : 애니메이션이 끝나면 거기서 멈춤

---

간단 예시

@keyframes ani-sample {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(200px, 0);
    }

    100% {
        transform: translate(500px, 200px);
    }
}

키프레임 설정

animation: ani-sample 2s 1s ease reverse 4 forwards;

로 한줄에 몰아서 사용 가능