📌 오늘의 생각

오늘은 본격적으로 애니메이션을 활용하는 방법에 대해 학습하였다. 어제보다 더 자세하고 섬세하게 요소를 조작하는 법을 배웠으며, 가장 흥미롭게 학습을 했다. 하지만 어려웠던 부분은 애니메이션을 만드는 두 가지 방법 중, 어느 방법을 내가 원하는 동작에 적용시켜야하는지 판단이 아직 잘 되지 않았다.

---

📒 목차

• transform
• CSS를 이용하여 애니메이션 만들기 2가지 방법

---

CSS

1️⃣ transform

• 이동, 회전 확대/축소, 비틀기 등의 변형 효과

🟦 translate(x, y)

• 요소의 좌표 움직이기

transform: translate(20px, 25%)

/* x축으로 20px만큼, y축으로 25% 이동 */

🟦 translateX(n) / translateY(n)

• X좌표 or Y좌표를 기준으로 n만큼 움직

transform: translateX(20px)

transform: translateY(20px)

🟦 scale(x, y)

• 각 축 방향으로 x, y만큼 요소를 축소 혹은 확대
• 배수로 측정한다

transform: scale(0.75,1.1)

🟦 scaleX(n) / scaleY(n)

• x or y축 방향으로 n만큼 요소를 축소 혹은 확대

transform: scaleX(1.1)

transform: scaleY(1.5)

🟦 skew(x, y)

• 요소를 기울여 마름모꼴처럼 만들기

transform: skew(15deg,10deg)

🟦 skewX(n) / skewY(n)

• 요소를 X or Y축으로 n도 만큼 기울이기

transform: skewX(15deg)

transform: skewY(30deg)

🟦 rotate(n)

• 요소를 n만큼 회전시키기

transform: rotate(45deg)

✅ transform 중첩적용

• 여러가지 변환함수를 중첩하여 속성값을 줄 수 있다

transform: rotate(30deg) translateX(12px)

---

2️⃣ CSS를 이용하여 애니메이션 만들기 2가지 방법

• transition으로 만들 수 있는 것은 transition 안에서 해결하고, 만들 수 없는 것은 애니메이션으로 만든다

🟦 1. transition 속성 활용

🟦 2. animaation, keyframe 활용

✅ @keyframes

• CSS 애니메이션 의 시작, 중간, 끝 등의 중간 상태를 정의

/* keyframe 작성 방법 */
@keyframes 애니메이션이름 {
	from {
		left : 0;
	}
	to{
		left : 200px;
	}
}

✅ animation

🟦 animation-name

• 어떠한 keyframes를 요소에 적용할 것인지 지정

animation-name: moveRight

🟦 animation-duration

• 애니메이션 한 번 재생하는데 걸리는 시간 지정

animation-duration: 3s

🟦 animation-direction

• 애니메이션 재생 방향 정의 (정방향 / 역방향)

animation-direction: alternate
/* 정방향 재생 (정방향 <-> 역방향 번갈아 재생) */
animation-direction: normal
/* 정방향 재생 */
animation-direction: reverse
/* 역방향 재생 */
animation-direction: alternate-reverse
/* 역방향 재생 (역방향 <-> 정방향 번갈아 배생) */

🟦 animation-iteration-count

• 애니메이션 재생 횟수 정의

animation-iteration-count: infinite
/* 무한대 재생 */
animation-iteration-count: 4
/* 4번 재생 반복 */

🟦 animation-timing-function

• 애니메이션 재생 패턴 지정

animation-timing-function: linear
animation-timing-function: ease
animation-timing-function: ease-in
animation-timing-function: ease-out
animation-timing-function: ease-in-out

🟦 animation-delay

• 애니메이션 시작 지연시간 지정

animation-delay: 3s

🟦 애니메이션 단축속성

• 순서가 바뀔경우 오류 또는 의도와 다른 결과가 나올 수 있다