CSS animation/Multi Columns

animation

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

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

@keyframes

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

@keyframes 애니메이션이름{

0% { 속성: 값; }

50% { 속성: 값; }

100% { 속성: 값; }

}

 

animation- name

• @keyframes 규칙의 이름을 지정

animation-duration

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

animation-timing-function

• 타이밍 함수 지정

animation-delay

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

• 음수가 있을 경우 애니메이션은 바로 시작

animation-iteration-count

• 애니메이션의 반곡 횟수를 설정

• 숫자

• infinite(무한)

animation-direction

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

• normal, 정방향에서 역방향으로 반복

• reverse, 역방향에서 정방향으로 반복

• alternate, 정방향에서 역방향으로 반복(왕복)

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

animation-fill-mode

• 애니메이션의 전후 상태를 설정

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

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

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

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

animation-play-state

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

• running: 애니메이션을 동작

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

Multi Columns(다단)

columns

• 다단을 정의

• auto: 브라우저가 단의 너비와 개수를 설정

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

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

• columns: 너비 개수;

column-width

• 단의 최적 너비를 설정

• auto: 브라우저가 단의 너비를 설정

• column-width: 너비;

• 각 단이 줄어들 수 있는 최적 너비를 설정

• 요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우 단의 개수가 조정됨

column-count

• 단의 개수를 설정

• auto: 브라우저가 단의 개수를 설정

column-gap

• 단과 단 사이의 간격 설정

• normal: 브라우저가 단과 단 사이의 간격을 설정

• column-gap: 간격;

column-rule

• 단과 단 사이의 선을 지정

• column-width: 선의 두께를 지정

• column-style: 선의 종류를 지정

• column-color: 선의 색상을 지정

• column-rule: 두께 종류 색상;