elex/css-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2025-02-03T19:29:18

Browse Source
This commit is contained in:
Elex
2025-02-03 19:29:18 +09:00
parent 7936270d10
commit 3d9e93ae42
9 changed files with 545 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/10_애니메이션 및 트랜지션.md
View File

@@ -1,13 +1,13 @@
# 애니메이션 및 트랜지션
| 속성 | 설명 |
|---|---|
| transition | |
| animation | |
| transform | |
| transform-style | |
| perspective | |
| perspective-origin | |
| 속성 | 설명 | 옵션 |
|---|---|---|
| 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)
트랜지션은 상태가 변화할 때 애니메이션 효과를 추가하는 속성!
@@ -43,7 +43,7 @@ button:hover {
트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
#### transition-timing-function
속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.
* ease | linear | step-end | steps(4, end)
* ease, linear, step-end, steps(4, end)
#### transition-delay
속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
@@ -163,7 +163,6 @@ element.addEventListener('transitionend', function(event){
* backwards : 애니메이션 시작 전 첫 번째 프레임 유지
* both : forwards + backwards 효과
```css
@keyframes bounce {
0% {