animation

CSS로 애니메이션효과를 만들 수 있다.

애니메이션은 우선 키프레임을 정의하여 효과를 부여한다.

@keyframes name {
    0% { ... }
    
    n% { ... }
    
    100% { ... }
}

와 같이 키프레임을 정의한다.

키프레임을 정의했으면 애니메이션을 적용할 셀렉터에 animation 프로퍼티로 적용한다.

.selector {
    animation:
        animation-name,
        animation-duration,
        animation-timing-function,
        animation-delay,
        animation-iteration-count,
        animation-direction,
        animation-fill-mode,
        animation-play-state;
}

animation-name

• keyframes에서 정의한 name.

animation-duration

• 애니메이션 재생 시간.
• 기본값은 0s

animation-timing-function

• ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, cubic-bezier(), steps
• 기본값은 ease

animation-delay

• 애니메이션 시작되기까지 지연시간
• 기본값은 0s

animation-iteration-count

• 반복 횟수.
• 기본값은 1.
• 0.5: 싸이클이 50%까지만 재생됨.
• infinite: 무한 재생

animation-direction

• 재생 방향
• normal: 기본값. 정방향 재생. 재생이 끝나면 키프레임이 0%값으로 다시 셋팅됨.
• reverse: 역재생. 재생이 끝나면 키프레임이 100%값으로 다시 셋팅됨.
• alternate: 시작 키프레임값이 0%이면 정방향 재생, 100%이면 역방향 재생. 재생횟수가 여러번인 경우, 재생->되감기->재생->되감기 형식으로 플레이 됨.
• alternate-reverse: alternate와 반대.

animation-fill-mode

• 애니메이션의 시작전과 끝났을 때에 대한 css 스타일 유지에 관한 설정.
• none: 기본값. 애니메이션이 진행될 때를 제외하고 기본 스타일을 유지한다.
• forwards: 애니메이션이 시작하기 전, 기본 스타일을 유지한다. 애니메이션이 끝났을 때 끝난 프레임의 스타일을 유지한다. 단, 이는 animation-direction의 영향을 받는다.
• backwards: 애니메이션이 시작하기 전, 0%의 스타일을 유지한채 시작한다. 끝나면 원래 스타일로 돌아간다. 이 역시 animation-direction의 영양을 받는다.
• both: forwards와 backwards의 합체다. 애니메이션이 시작하기 전 0%의 스타일을 유지한채 시작하고 끝나는 경우 끝난 스타일을 유지한다.

animation-play-state

• 애니메이션의 재생, 멈춤을 조작한다.
• running: 기본값. 애니메이션을 재생시킴.
• paused: 애니메이션을 중단시킴.

(paused는 스크립트와 연계해서 사용해야할 듯 싶다.)

애니메이션을 한 셀렉터에 여러개 정의할 수 있다.

.selector {
    animation: anim1, anim2, anim3;
}

콤마로 구분하며, 이 경우 animation-delay 값을 적절하게 분배해줘야 한다. 그러지 않으면 가장 마지막의 애니메이션이 실행된다.