속성 - 애니메이션&다단

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

값	의미	기본값
animation-name	@keyframes 규칙의 이름을 지정	none
animation-duration	애니메이션의 지속 시간 설정	0s
animation-timing	타이밍 함수 지정	ease
animation-delay	애니메이션의 대기 시간 설정	0s
animation-iteration-count	애니메이션의 반복 횟수 설정	1
animation-direction	애니메이션의 반복 방향 설정	normal
animation-fill-mode	애니메이션의 전후 상태(위치) 설정	none
animation-play-state	애니메이션의 재생과 정지 설정	running

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

 

@keyframes

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

@keyframes 애니메이션 이름{

    0% {속성: 값; }

    50% {속성: 값; }

    100% {속성: 값; }

}

 

animation-delay

음수가 허용됨, 음수가 있을 경우 애니메이션은 바로 시작되지만 그 값만큼 애니메이션이 앞서 시작

 

animation-direction

값	의미	기본값
normal	정방향만 반복	normal
reverse	역방향만 반복
alternate	정방향에서 역방향으로 반복(왕복)
alternate-reverse	역방향에서 정방향으로 반복(왕복)

 

animation-fill-mode: 애니메이션의 전후 상태(위치)를 설정

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

animation-play-state: 애니메이션의 재생과 정지를 설정

값	의미	기본값
running	애니메이션을 동작	running
paused	애니메이션 동작을 정지

multi-columns

일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하며, 가독성 확보

colums:다단을 정의

값	의미	기본값
auto	브라우저가 단의 너비와 개수를 설정	auto
column-width	단의 최적 너비를 설정	auto
column-count	단의 개수를 설정	auto

columns: 너비 개수;

각 단이 줄어들 수 있는 최적 너비(최소 너비)를 설정하며, 요소의 너비가 가변하여 최적 너비보다 줄어들 경우 단의 개수가 조정됩니다.

 

column-gap: 단과 단 사이의 간격 설정

기본값: normal(브라우저가 단과 단 사이의 간격을 설정(1em)

 

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

값	의미	기본값
column-width	선의 두께를 지정	medium
column-style	선의 종류를 지정	none
column-color	선의 색상을 지정	요소의 글자색과 동일

column-rule: 두께 종류 색상;

구분선은 단과 단 사이의 간격 중간에 위치함

 

출처. heropy.blog/