[패스트캠퍼스][프론트엔드] 52. 애니메이션 & 다단

패스트캠퍼스 프론트엔드 올인원 with React 공부 정리글입니다!

이 글은 2020/12/09~2020/12/10 동안 학습한 18번째 커리큘럼인 CSS/속성- 애니메이션 & 다단에 관한 내용을 담고 있습니다.

---

animation

◾ 요소의 애니메이션을 설정 및 제어 (단축 속성)

◾ 관련 개별 속성 값 ⬇

 

값	의미	기본값
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: 이름 지속시간 [ 타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지 ];

➡ [ ] 안 속성은 순서를 바꿔서 쓸 수 있음

 

(JSFiddle)

 

@keyframes

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

◽ 사용법

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

 

(JSFiddle)

 

animation-name

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

◾ 속성 값 ⬇

 

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

 

animation-duration

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

◾ 속성 값 ⬇

 

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

 

◽ 시간은 초[s]나 밀리초[ms] 단위로 나타낼 수 있음

◽ 0.5s 를 .5s 와 같이 쓸 수 있음

 

animation-timing-function

◾ 속성 값 ⬇

 

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

 

animation-delay

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

◾ 속성 값 ⬇

 

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

✨ 속성 값은 음수를 허용함. 음수가 있을 경우, 애니메이션은 바로 시작하지만 그 값만큼 애니메이션이 앞서 시작함 (애니메이션 주기 도중에 시작)

 

animation-iteration-count

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

◾ 속성 값 ⬇

 

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

 

animation-direction

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

➡ 좌-우: 정방향 / 우-좌: 역방향

◾ 속성 값 ⬇

 

값	의미	기본값
normal	정방향만 반복	normal
reverse	역방향만 반복	.
alternate	정방향 ➡ 역방향 (왕복)	.
alternate-reverse	역방향 ➡ 정방향 (왕복)	.

 

✨ alternate, alternate-reverse를 사용하면 요소가 왕복 운동하기 때문에 animation-iteration-count의 값이 2 이상이어야 함

 

(JSFiddle)

 

animation-fill-mode

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

◾ 속성 값 ⬇

 

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

 

animation-play-state

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

◾ 속성 값 ⬇

 

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

 

(JSFiddle)

 

Multi-Columns

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

 

columns

◾ 다단을 정의 (단축 속성)

◾ 속성 값 ⬇

 

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

 

◽ 사용법

➡ columns: 너비 개수;

 

column-width

◾ 각 단이 줄어들 수 있는 최적 너비(최소 너비)를 설정

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

 

◾ 속성 값 ⬇

 

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

 

column-count

◾ 단의 개수를 설정

◾ 속성 값 ⬇

 

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

 

column-gap

◾ 단과 단 사이의 간격 설정

◾ 속성 값 ⬇

 

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

 

column-rule

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

◾ 속성 값 ⬇

 

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

 

◽ 사용법

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

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

 

(JSFiddle)

 

---

강의 링크: https://bit.ly/3m0t8GM