트랜지션(transition)은 background, color, width, height, fransformation 등의 CSS 속성 값이 변화할 때, 일정 시간(duration)에 걸쳐 부드럽게 변경할 수 있도록 하는 것이다.
| 속성 값 | 설명 | 기본값 |
| transition-property | 트랜지션의 대상이 되는 CSS 속성 지정 | all |
| transition-duration | 트랜지션이 일어나는 지속 시간 지정 | 0s |
| transition-timing-function | 트랜지션 효과를 위한 수치 함수 지정 | ease |
| transition-delay | 속성이 변화한 시점과 트랜지션이 시작하는 사이의 대기 시간 지정 | 0s |
| transition | 모든 트랜지션 속성을 한번에 지정 (Shorthand) transition: property duration function delay |
- transition-timing-function의 종류
| 속성 값 예문 | 설명 |
| linear | 시작부터 종료까지 등속 운동 |
| ease | 기본값 : 느리게 시작하여 점점 빨라졌다가 느려지면서 종료 |
| ease-in | 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동 |
| ease-out | 일정한 속도의 등속으로 시작해서 점점 느려지면서 종료 |
| ease-in-out | ease와 비슷하게 느리게 시작하여 느려지면서 종료 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transitions</title>
<style>
div.tr{width: 400px; height: 30px; line-height: 30px;
padding: 10px; margin-bottom: 5px;
background: lightgreen; color: black;
cursor: pointer;
}
div.tr1{transition: width 1s linear}
div.tr1:hover{width: 500px;}
div.tr2{transition: background 1s ease-in}
div.tr2:hover{background: lightcoral;}
div.tr3{transition: color 1s ease-in-out 1s}
div.tr3:hover{color: red;}
div.tr4{transition: width 1s ease, background 2s ease}
div.tr4:hover{width: 500px; background: lightcoral;}
div.tr5{transition: width 1s ease-out, background 2s ease-out, color 3s ease-out}
div.tr5:hover{width: 500px; background: lightcoral; color: #fff}
div.tr6{transition: all 2s}
div.tr6:hover{width: 500px; background: lightcoral; color: #fff}
</style>
</head>
<body>
<div class="tr tr1">width 1s linear</div>
<div class="tr tr2">background 1s ease-in</div>
<div class="tr tr3">color 1s ease-in-out delay 1s</div>
<div class="tr tr4">width 1s background 2s ease</div>
<div class="tr tr5">width 1s background 2s color 3s ease-out</div>
<div class="tr tr6">width background color all 2s</div>
</body>
</html>width 1s linear
background 1s ease-in
color 1s ease-in-out delay 1s
width 1s background 2s ease
width 1s background 2s color 3s ease-out
width background color all 2s
'CSS' 카테고리의 다른 글
| CSS-애니메이션(Animation) Icon 예제 (0) | 2020.08.24 |
|---|---|
| CSS-애니메이션(Animation) (0) | 2020.08.24 |
| CSS-Transform (0) | 2020.08.24 |
| CSS- Vendor Prefix (벤더 프리픽스) (0) | 2020.08.20 |
| CSS-BOX MODEL 2 (box-sizing, box-shadow) (0) | 2020.08.20 |
댓글