<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 100px;
height: 100px;
background-color: #FF6347;
/* 토마토 색상 */
transition-property: width;
/* width 속성에 전환 효과 적용 */
transition-duration: 1.5s;
/* 1.5초 동안 변화 */
}
.box:hover {
width: 200px;
/* 마우스를 올리면 가로 크기가 200px로 변경 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>CSS의 transition 속성은 웹 요소의 스타일 변화를 부드럽게 만들어주는 강력한 도구입니다. 예를 들어, 버튼에 마우스를
올렸을 때 색상이 서서히 변하거나, 크기가 자연스럽게 커지는 효과를 줄 수 있습니다.
1. CSS Transition의 기본 구조
transition 속성은 요소의 스타일 변화를 부드럽게 전환(transition) 하도록 설정합니다.
이 속성은 다음과 같은 4가지 주요 속성으로 구성됩니다.
transition-property: 어떤 CSS 속성을 전환할지 지정합니다. (예 : width,opacity,backgroud-color등)
transition-duration: 전환 효과가 얼마나 오래 지속될지 시간을 지정합니다.(예 : 2s = 2초)
transition-timing-function: 전환 효과가 시작되기 전 대기 시간을 설정합니다.(예 : 1s = 1 초 대기 )
이 4 가지 속성을 한번에 설정할 수도 있습니다. 예를 들어;
transition-delay : 전환 효과가 시작되기 전 대기 시간을 설정합니다.(예: 1s = 1초 대기 )
이 4가지 속성을 한 번에 설정할 수도 있습니다. 예를 들어:
transition: width 2s ease 1s;
2. Transition 속성 하나씩 살펴보기
(1) transition-property와 transition-duration
먼저, transition-property는 어떤 속성을 부드럽게 변화시킬지 정합니다. transition-duration은 그변화가 얼마나 오래 걸릴지 설정하죠.
(2) transition-timing-function: 속도 패턴 설정
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
transition-timing-function - CSS: Cascading Style Sheets | MDN
The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
developer.mozilla.org
transition-timing-funtion은 전환 효과의 속도 패턴을 설정합니다. 주요 값은 다음과 같습니다.
- esae : 천천히 시작해서 중간에 빨라지고, 끝에서 다시 느려짐(기본값)
- linear:일정한 속도로 변화.
- ease-in : 천천히 시작해서 점점 빨라짐.
- ease-out : 빠르게 시작해서 점점 느려짐
- ease-in-out : 천천히 시작하고, 천천히 끝남
- step-start : 변화가 즉시 시작.
- step-end : 변화가 즉시 끝남.
- steps(n,stard/end): n단계로 나눠서 변화.
- cubic-bezier(n,n,n,n) : 사용자 정의 속도 곡선.
'JAVA 유용한 클래스' 카테고리의 다른 글
| CSS flexbox 사용해보기(2) - 21 (0) | 2025.06.06 |
|---|---|
| CSS flexbox 사용해보기 - 20 (0) | 2025.06.06 |
| 1:N 소켓 양뱡향 하기(Sever측) (chap gpt와의 대화) (0) | 2025.06.04 |
| (Socket) 1:1 양방향 통신 (0) | 2025.06.03 |
| (Socket) 1:1 단방향 통신(클라이언트 측) (0) | 2025.06.02 |