CSS #11 -애니메이션&다단-

1. 애니메이션 개요

요소에 애니메이션을 설정/제어 (단축)

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

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

.box{
width: 100px;
height:100px;
background:tomato;
animation: hello 2s linear infinite both;
}

@ketframes hello {
0%{width: 200px;}
100%{width:50px;}
}

---

2. keyframes rule

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

💡사용법
@keyframes 애니메이션 이름{
0%{속성:값;}
50%{속성:값;}
100%{속성:값;}
}

@keyframes move-box{
0%{left:100px;}
100%{top:200px;}
}

여기서는 기본적인 keyframes rule의 사용법에 대한 것이니 밑에서 자세히 보자.

---

3. 애니메이션 속성-animation-name, animation-duration

1. animation-name

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

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

2. animation-duration

애니메이션 지속시간 설정(개별)

값	의미	기본값
시간	지속시간을 설정	0s

---

4. 애니메이션 속성-animation-timing-function,animation-delay

1. animation-timing-function

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

값	의미	기본값	cubic-bezier값
ease	빠르게-느리게	ease	cubic-bezier(.25, .1, .25, 1)
linear	일정하게		cubic-bezier(0, 0, 1, 1)
ease-in	느리게-빠르게		cubic-bezier(.42, 0, 1, 1)
ease-in-out	느리게-빠르게-느리게		cubic-bezier(0, 0, .58, 1)
ease-out	느리게-빠르게-느리게		cubic-bezier(.42, 0, .58, 1)
cubic-bezier(n,n,n,n)	자신만의 값을 정의(0~1)
steps(n)	n번 분할된 애니메이션

transition-timing-function과 동일한 것을 알 수 있다.

2. animation-delay

애니메이션의 대기 시간 설정(개별)

값	의미	기본값
시간	대기시간을 설정	0s

음수가 허용된다. 음수가 있을 경우 애니메이션은 바로 시작되지만, 그 값만큼 애니메이션이 앞서 시작된다(애니메이션 주기 도중에 시작).

duration으로 예를 들어 3초를 설정하고 delay로 -1을 설정한다고 하면 2초가 되는 것을 볼 수 있다.

delay가 duration보다 앞에만 적혀있지 않으면 괜찮다.

---

5. 애니메이션 속성-animation-iteration-count, animation-direction

1. animation-iteration-count

애니메이션의 반복 횟수를 설정(개별)

값	의미	기본값
숫자	반복 횟수를 설정	1
infinite	무한반복

2. animation-direction

애니메이션의 반복 방향을 설정(개별)

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

---

6. 애니메이션 속성-animation-fill-mode

애니메이션의 전후상태를 정의해주는 속성이다.

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

---

7. 애니메이션 속성-animation-play-state

애니메이션의 재생과 정지를 설정(개별)

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

여기서 가상 클래스 선택자 요소를 통해서 응용이 가능하다.
예를 들어서 움직이고 있는 박스에 마우스를 올렸을 때 멈추고 멈춘 박스안에 있는 글자가 바뀌게 할 수 있다.

<div class="box"></div>

.box{
width:150px;
height:100px;
background:tomato;
border-radius:10px;
animation: size-up 3s linear infinite alternate;
display:flex;
justify-content:center;
align-items:center;
}
.box::before{
content:"running";
font-size:20px;
color:white;
font-weight:700;

}
.box:hover{
animation-play-state:paused;
background: dodgerblue;
}
.box:hover::before{
 content:"paused";
 
}
@keyframes size-up{
0%{
	width:150px;
}
100%{
	width:100%;
}
}

위의 예제를 가지고 실행해서 결과를 한번 보자.

---

8. 다단

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

1.columns

다단을 정의(단축)

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

💡사용법

column:너비 개수;

.text{
	columns: 100px 2;
}

2. columns-width

단의 최적 너비를 설정(개별)

값	의미	기본값
auto	브라우저가 단의 너비를 설정	auto
단위	px, em, cm등 단위로 지정

💡사용법
column-width: 너비;

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

3. column-count

단의 개수를 설정(개별)

값	의미	기본값
auto	브라우저가 단의 개수를 설정	auto
숫자	단의 개수를 설정

💡사용법

column-count:개수;

4. column-gap

단과 단 사이의 간격 설정

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

💡사용법

column-gap:간격;

5. column-rule

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

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

💡사용법
column-rule:두께 종류 색상;

구분선(column-rule)은 단과 단 사이의 간격 중간에 위치한다.

만약 columns의 지정하는 선 같은 경우 글자색의 영향을 같이 받는다.
만약 글자색의 영향을 받지 않게 하기 위한다면, column-rule 선의 색상을 명확하게 명시해준다. 만약 글자색과 동일한 선을 원한다면 column-rule에 있는 색을 없애면 된다.