CSS - 애니메이션&다단

animation

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

 

@keyframes

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

animation-name

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

none : 애니메이션을 지정하지 않음.

@keyframes 이름 : 이름이 일치하는 @keyframes 규칙의 애니메이션을 적용.

 

animation-duration

; 애니메이션의 지속 시간 설정.

animation-timing-function

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

ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n, n, n, n), steps(n).

 

animation-delay

; 애니메이션의 대기 시간 설정.

animation-iteration-count

; 애니메이션의 반복 횟수를 설정.

숫자 : 반복 횟수를 설정. infinite=무한반복.

 

animation-direction

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

normal : 정방향만 반복.

reverse : 역방향만 반복.

alternate : 정방향에서 역방향으로 반복.(왕복)

alternate-reverse : 역방향에서 정방향으로 반복.(왕복)

animation-fill-mode

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

none : 기존 위치에서 시작->애니메이션 시작 위치로 이동->동작->기존위치에서 끝.

forwards : 기존 위치에서 시작->애니메이션 시작 위치로 이동->동작->애니메이션 끝 위치에서 끝.

backwords : 애니메이션 시작 위치에서 시작->동작->기존위치에서 끝.

both : 애니메이션 시작 위치에서 시작->동작->기존위치에서 끝 위치에서 끝.

 

animation-play-state

; 애니메이션의 재생과 정지를 설정.

running : 애니메이션을 동작.

paused : 애니메이션 동작을 정지.

-

columns

; 다단을 정의.

auto : 브라우저가 단의 너비와 개수를 설정. 단위 : px, em, cm 등 단위로 지정.

column-width : 단의 최적 너비를 설정.

column-count : 단의 개수를 설정.

 

column-gap

; 단과 단 사이의 간격 설정.

normal : 브라우저가 단과 단 사이의 간격을 설정(1em). 단위 : px, em, cm 등 단위로 지정.

 

column-rule

; 단과 단 사이의 (구분)선을 지정.

column-width : 선의 두께를 지정.(medium)

column-style : 선의 종류를 지정.(none)

column-color : 선의 색상을 지정.(요소의 글자색과 동일)