transition 속성
1. transition property
- 어떤 스타일 속성을 변형할지 설정
|
모든 스타일 속성이 transition 스타일 속성과 animation 스타일 속성에 영향을 받는 (animatable) 것은 아니다. 아래에 나온 스타일 속성들이 transition 스타일 속성과 animaition 스타일 속성에 영향을 받는 대표적인 스타일 속성들이다.
▶ 위치 속성 : top, right, bottom, left ▶ 크기 속성 : width, height ▶ 박스, 테두리 속성 : margin, padding, border-width, border-radius ▶ 색상, 투명도 속성 : color, background-color, opacity ▶ 변환 속성 : transform
|
- none : 모든 스타일 속성에 변형을 적용하지 않도록 설정
- all (default) : 변형에 영향을 받는(animatable) 모든 스타일 속성에 변형을 적용하도록 설정
- property : 지정한 스타일 속성에만 변형을 적용하도록 설정
2. transition-duration
- 변형이 진행되는 데 걸리는 시간을 설정
- time (default : 0s) : 시간 단위(s, ms)를 사용해 설정
3. transition-timing-function
- 변형을 진행할 때 적용할 시간에 따른 속도의 변화 함수를 설정
- ease (default) : ease 함수로 설정
- linear : linear 함수로 설정
- ease-in : ease-in 함수로 설정
- ease-out : ease-out 함수로 설정
- ease-in-out : ease-in-out 함수로 설정
- cubic-bezier() : cubic-bezier 함수로 설정
4. transition-delay
- 변형을 시작하기 전에 지연을 설정
- time (default : 0s) : 시간 단위(s, ms)를 사용해 설정
● transition
- 변형과 관련된 스타일 속성들의 값을 한꺼번에 설정
| transition : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> |
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="reset.css">
<title>transition 속성</title>
<style>
#container {
border: 10px solid #555;
padding: 1em;
margin: 100px 50px;
}
.bar {
width: 10px;
height: 2em;
background-color: darkmagenta;
opacity: 1; /* 투명도*/
/* transition 스타일 속성에 영향을 받는 스타일 속성에 변화가 발생해야
transtion 스타일 속성이 적용된다 */
/* transition 스타일 속성에 영향을 받는 스타일 속성에 변화가 발생했을 때
현재 상태에서 변화하는 상태까지 진행된느데 걸리는 시간을 설정*/
transition-duration: 2s; /*기본값은 0 / 최소한 꼭 걸어놔야함*/
/* transition 스타일 속성에 영향을 받게 될 스타일 속성을 설정*/
/* transition-property: all; 기본값*/
transition-property: width, opacity;
/* hover 되는 순간 백그라운드 컬러는 바로 바뀌지만 width와 opacity 속성은
지정한 transition 속성에 따라 바뀐다*/
}
.bar:not(:last-child) { margin-bottom: 1em; }
#container:hover > .bar {
width: 100%;
background-color: darkorange;
opacity: 0;
}
/* transition 스타일 속성이 설정된 요소에 변화가 진행되기 전에 지연 설정
.bar:nth-child(1) { transition-delay: 0s;}
.bar:nth-child(2) {transition-delay: 0.5s;}
.bar:nth-child(3) {transition-delay: 1s;}
.bar:nth-child(4) {transition-delay: 1.5s;}
.bar:nth-child(5) {transition-delay: 2s;} */
/* transition 스타일 속성이 설정된 요소에 변화가 진행될대 시간에 따른 속도의 변화 설정*/
.bar:nth-child(1) { transition-timing-function: linear;}
.bar:nth-child(2) { transition-timing-function: ease;}
.bar:nth-child(3) { transition-timing-function: ease-in;}
.bar:nth-child(4) { transition-timing-function: ease-in-out;}
.bar:nth-child(5) { transition-timing-function: ease-out;}
</style>
</head>
<body>
<div id="container">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div> <!-- /#container-->
</body>
</html>