246 lines
7.2 KiB
Markdown
246 lines
7.2 KiB
Markdown
# 애니메이션 및 트랜지션
|
|
|
|
| 속성 | 설명 | 옵션 |
|
|
|---|---|---|
|
|
| transition | 요소의 속성이 부드럽게 변화하도록 설정 | 속성 지속시간 타이밍함수 지연시간 |
|
|
| animation | 요소에 키프레임 기반 애니메이션 효과 적용 | 이름 지속시간 타이밍함수 지연시간 반복 횟수 방향 |
|
|
| transform | 요소를 이동, 회전, 확대/축소, 기울이기 변형 | translate(x,y), rotate(deg), scale(x,y), skew(x,y) |
|
|
| transform-style | 3D 변형을 자식 요소에도 적용할지 여부 | flat, preserve-3d |
|
|
| perspective | 3D 원근감을 설정 |
|
|
| perspective-origin | 원근감의 기준점을 설정 |
|
|
|
|
## 트랜지션(Transition)
|
|
트랜지션은 상태가 변화할 때 애니메이션 효과를 추가하는 속성!
|
|
예를 들어, 버튼 색상이 변할 때 자연스럽게 변화하도록 설정할 수 있어.
|
|
|
|
### transition
|
|
요소의 속성이 즉시 변경되지 않고 부드럽게 전환됨
|
|
> hover, focus, active 같은 상태 변화에 자주 사용됨
|
|
```css
|
|
요소 {
|
|
transition: 속성 지속시간 타이밍함수 지연시간;
|
|
}
|
|
```
|
|
* 속성 : 변화할 CSS 속성 (예: background-color, width, opacity)
|
|
* 지속시간 : 변화가 지속될 시간 (s, ms 단위)
|
|
* 타이밍 함수 : 변화 속도를 조절 (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier())
|
|
* 지연시간 : 효과가 시작되기까지의 대기 시간
|
|
```css
|
|
button {
|
|
background-color: blue;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
transition: background-color 0.5s ease-in-out;
|
|
}
|
|
button:hover {
|
|
background-color: red;
|
|
}
|
|
/* 버튼에 마우스를 올리면 0.5초 동안 색상이 부드럽게 변함! */
|
|
```
|
|
#### transition-property
|
|
트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다.
|
|
#### transition-duration
|
|
트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
|
|
#### transition-timing-function
|
|
속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.
|
|
* ease, linear, step-end, steps(4, end)
|
|
#### transition-delay
|
|
속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
|
|
|
|
#### 여러 속성에 트랜지션 적용
|
|
```css
|
|
.box {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: blue;
|
|
transition: width 0.5s, height 0.5s, background-color 0.5s;
|
|
}
|
|
.box:hover {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: red;
|
|
}
|
|
/* 마우스를 올리면 크기와 색상이 동시에 변화! */
|
|
```
|
|
> all을 사용하면 모든 속성에 적용 가능
|
|
> ```css
|
|
> transition: all 0.5s ease-in-out;
|
|
> ```
|
|
> 하지만 all은 성능에 영향을 줄 수 있으므로 필요한 속성만 지정하는 게 좋아!
|
|
|
|
#### cubic-bezier()로 커스텀 트랜지션 설정
|
|
```css
|
|
.box {
|
|
transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
|
|
}
|
|
```
|
|
#### 트랜지션 완료 이벤트
|
|
```javascript
|
|
element.addEventListener('transitionend', function(event){
|
|
console.log(event.propertyName);
|
|
console.log(event.elapsedTime);
|
|
}, true);
|
|
```
|
|
|
|
## 애니메이션(Animation)
|
|
애니메이션은 요소의 스타일이 여러 단계로 변하면서 부드럽게 움직이는 효과를 줄 때 사용!
|
|
> 트랜지션은 한 번만 실행되지만, 애니메이션은 반복 실행 가능!
|
|
|
|
### @keyframes
|
|
애니메이션의 각 단계를 설정할 수 있음
|
|
* from, to 또는 %를 사용하여 여러 단계 지정 가능
|
|
```css
|
|
@keyframes 애니메이션이름 {
|
|
from {
|
|
속성: 값;
|
|
}
|
|
to {
|
|
속성: 값;
|
|
}
|
|
}
|
|
```
|
|
> from은 0%, to는 100%와 동일!
|
|
|
|
### animation
|
|
```css
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.box {
|
|
animation: fadeIn 2s ease-in-out;
|
|
}
|
|
/* 2초 동안 투명도(opacity)가 0에서1로 변경됨! */
|
|
```
|
|
|
|
#### 여러 단계 애니메이션 설정
|
|
```css
|
|
@keyframes slide {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
transform: translateX(50px);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.box {
|
|
animation: slide 3s infinite;
|
|
}
|
|
/* 애니메이션이 왼쪽에서 오른쪽으로 갔다가 다시 돌아옴! */
|
|
```
|
|
|
|
#### animation-name
|
|
적용할 애니메이션 이름
|
|
* @keyframes에서 지정
|
|
#### animation-duration
|
|
실행 시간
|
|
* s, ms 단위
|
|
#### animation-timing-function
|
|
속도 곡선
|
|
* ease, linear, ease-in, ease-out
|
|
#### animation-delay
|
|
지연 시간 (시작 전 대기)
|
|
#### animation-iteration-count
|
|
반복 횟수
|
|
* infinite 사용 가능
|
|
#### animation-direction
|
|
애니메이션 방향
|
|
* normal : 처음부터 끝까지 정상 실행 (기본값)
|
|
* reverse : 끝에서 시작으로 거꾸로 실행
|
|
* alternate : 처음 → 끝 → 처음 반복
|
|
* alternate-reverse :끝 → 처음 → 끝 반복
|
|
#### animation-fill-mode
|
|
애니메이션 종료 후 상태. 시작 전/끝난 후 스타일 유지
|
|
* none : 애니메이션 종료 후 원래 상태로 돌아감 (기본값)
|
|
* forwards : 마지막 상태를 유지
|
|
* backwards : 애니메이션 시작 전 첫 번째 프레임 유지
|
|
* both : forwards + backwards 효과
|
|
|
|
```css
|
|
@keyframes bounce {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-30px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.box {
|
|
animation: bounce 1s infinite alternate ease-in-out;
|
|
}
|
|
```
|
|
|
|
## transform
|
|
transform 속성은 요소를 이동(translate), 회전(rotate), 확대/축소(scale), 기울이기(skew) 등의 변형을 적용하는 데 사용돼.
|
|
|
|
* translate(x, y)
|
|
* rotate(deg)
|
|
* scale(x, y)
|
|
* skew(x, y)
|
|
* rotateX(deg)
|
|
* rotateY(deg)
|
|
* rotateZ(deg)
|
|
* translate3d(x, y, z)
|
|
* scale3d(x, y, z)
|
|
|
|
### 여러 변형을 한 번에 적용 가능
|
|
```css
|
|
.box {
|
|
transform: translate(50px, 20px) rotate(30deg) scale(1.2);
|
|
} /* 이동 + 회전 + 확대를 한 번에 적용 가능! */
|
|
```
|
|
> 여러 개의 transform을 조합할 때는 순서가 중요해!
|
|
|
|
## transform-style
|
|
부모 요소의 3D 변환을 자식 요소에도 적용할지 결정!
|
|
> `transform-style: preserve-3d;`을 사용하면 자식 요소도 3D 공간에 배치됨.
|
|
```css
|
|
.container {
|
|
perspective: 500px;
|
|
transform-style: preserve-3d;
|
|
}
|
|
.box {
|
|
transform: rotateY(45deg);
|
|
}
|
|
/* 부모 요소의 원근 효과가 자식 요소에도 적용됨! */
|
|
```
|
|
> 기본값은 flat (자식 요소는 2D로 표시됨)
|
|
|
|
## perspective
|
|
perspective 속성은 3D 효과를 만들기 위해 원근감을 설정하는 데 사용돼.
|
|
> 요소가 멀리 있으면 작아지고, 가까이 있으면 커지도록 설정 가능!
|
|
|
|
* 카메라와 요소 사이의 거리를 조절
|
|
* 값이 작을수록 원근감이 강해지고, 값이 클수록 원근감이 약해짐
|
|
|
|
```css
|
|
.container {
|
|
perspective: 500px;
|
|
}
|
|
.box {
|
|
transform: rotateY(45deg);
|
|
}
|
|
/* 원근감 적용 후, Y축 45도 회전! */
|
|
```
|
|
|
|
## perspective-origin
|
|
원근 효과의 기준점을 이동
|
|
* 기본값: 50% 50% (정중앙)
|
|
```css
|
|
.container {
|
|
perspective: 600px;
|
|
perspective-origin: left top;
|
|
} /* 왼쪽 상단을 기준으로 원근 효과 적용! */
|
|
```
|
|
|