4.1 Transition 속성
CSS 전환 (transition)은 CSS 속성 값의 변화를 애니메이션으로 만들 수 있게 해줘서, 시작 상태와 끝 상태 사이에 부드러운 전환을 생성해. 이건 웹 페이지에 역동성을 추가해서 사용자 편의성을 향상시키는 강력한 도구야. 이제 전환의 주요 측면들, 속성, 지속 시간, 타이밍 함수 등을 살펴보자.
transition 속성은 전환의 모든 면을 하나의 속성으로 통합해. 이 속성은 다음을 포함할 수 있어:
- 애니메이션이 적용될 속성들.
- 애니메이션 지속 시간.
- 타이밍 함수.
- 애니메이션 시작 전 지연 시간 (선택 사항).
문법:
element {
transition: property duration timing-function delay;
}
여기서:
property: 전환이 적용될 속성 (예:width,height,background-color등)duration: 전환의 지속 시간 (예: 2초 동안 애니메이션할 경우2s또는 500밀리초는500ms)-
timing-function: 애니메이션 변경 속도를 정의하는 함수 (예:ease,linear,ease-in,ease-out,ease-in-out) delay: 전환 시작 전 지연 시간 (예: 1초 동안 기다릴 경우1s)
예제:
HTML
Content
CSS
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: width 2s ease-in-out, background-color 1s ease;
}
코드 설명:
-
transition: width 2s ease-in-out,background-color 1s ease: 두 개의 전환을 정의해. 하나는width속성을 2초 동안ease-in-out타이밍 함수로, 다른 하나는background-color속성을 1초 동안ease타이밍 함수로 전환해
4.2 전환 속성
1. transition-property 속성
transition-property 속성은 어떤 요소의 속성에 전환이 적용될지를 정의해.
문법:
element {
transition-property: property1, property2 ...;
}
예제:
CSS
.box {
transition-property: width, height, background-color;
}
2. transition-duration 속성
transition-duration 속성은 전환의 지속 시간을 설정해.
문법:
element {
transition-duration: time;
}
예제:
CSS
.box {
transition-duration: 2s, 1s, 3s;
}
3. transition-timing-function 속성
transition-timing-function 속성은 시간에 따라 애니메이션의 속도 변화를 정의해.
문법:
element {
transition-timing-function: function;
}
예제:
CSS
.box {
transition-timing-function: ease-in, linear, ease-out;
}
4. transition-delay 속성
transition-delay 속성은 전환 시작 전 지연 시간을 설정해.
문법:
element {
transition-delay: time;
}
예제:
CSS
.box {
transition-delay: 1s, 0s, 500ms;
}
4.3 전환 지속 시간
전환의 지속 시간은 속성 변경 애니메이션이 얼마나 지속될지를 결정해. 초(s) 또는 밀리초(ms) 단위로 설정해.
예제:
CSS
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: width 2s, height 1s, background-color 500ms;
}
코드 설명:
-
transition: width 2s,height 1s,background-color 500ms:width속성의 전환은 2초 동안,height는 1초 동안,background-color는 500밀리초 동안 지속됨을 정의해.
4.4 타이밍 함수
타이밍 함수는 시간에 따라 속성 값이 어떻게 변할지를 정의해. 다양한 애니메이션 효과를 만들 수 있어.
주요 타이밍 함수:
ease: 애니메이션이 천천히 시작해 중간에 빨라졌다가 끝에 느려져linear: 시작부터 끝까지 일정한 속도로 애니메이션이 진행돼ease-in: 애니메이션이 느리게 시작해 그 다음에 빨라져ease-out: 애니메이션이 빠르게 시작했다가 그 다음에 느려져ease-in-out: 애니메이션이 천천히 시작하고 끝나면서 중간에 빨라져
예제:
CSS
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
}
코드 설명:
ease-in-out: 부드러운 전환, 천천히 시작하고 끝남linear: 일정한 속도의 전환ease: 중간에 빨라지는 느린 시작과 끝을 가진 전환
GO TO FULL VERSION