18 - animation

animation

요소에 애니메이션을 설정/제어

 

animation:  애니메이션이름  지속시간  [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];

 

 

 

@keyframes

2개 이상의 애니메이션 중간 상태(프레임)을 지정

 

@keyframes 애니메이션이름{

   0% { 속성: 값;}

   50% { 속성: 값;}

   100% { 속성: 값;}

}

 

---

 

1. animation-name

@keyframes 규칙(애니메이션 프레임)의 이름을 지정

값	의미	기본값
none	애니메이션을 지정하지 않음	none
@keyframes 이름	이름이 일치하는 @keyframes 규칙의 애니메이션을 적용

 

2. animation-duration

애니메이션의 지속 시간 설정 (기본값: 0s)

 

3. animation-timing-function

타이밍 함수(애니메이션 효과를 계산하는 방법) 지정

값: ease, linear, ease-in, ease-out ...

 

4. animation-delay

애니메이션의 대기 시간 설정 (기본값: 0s / 음수 허용)

 

5. animation-iteration-count

애니메이션의 반복 횟수를 설정 (기본값: 1 / infinite: 무한 반복)

 

6. animation-direction

애니메이션의 반복 방향을 설정

값: normal(정방향) reverse(역방향) alternate(정방향에서 역방향으로) alternate-reverse

 

7. animation-fill-mode

애니메이션의 전후 상태(위치)를 설정

값	의미	기본값
none	기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 기존 위치에서 끝	none
forwards	기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 애니메이션 끝 위치에서 끝
backwards	애니메이션 시작 위치에서 시작 -> 동작 -> 기존 위치에서 끝
both	애니메이션 시작 위치에서 시작 -> 동작 -> 애니메이션 끝 위치에서 끝

 

8. animation-play-state

애니메이션의 재생과 정지를 설정 (기본값: running / paused: 애니메이션 동작을 정지)

 

---

 

Multi-Columns

 

columns

다단을 정의

 

column-width : 단의 최적 너비를 설정(px, em, cm...)

column-count : 단의 개수를 설정

column-gap : 단과 단 사이의 간격 설정(px, em, cm...)

column-rule : 단과 단 사이의 (구분)선을 지정 - width, style, color