css 프로퍼티를 변화시킬때 그 기간을 설정하여 동적인 효과를 내는 속성입니다.
transition-property의 속성값에 all을 적으면 모든 변화를 transition에 적용합니다. 또한, 단일 속성만 transition 적용할 수도 있습니다.
div위에 마우스를 올렸을때 width 변화만 transtion 적용한 예제
.box {
width: 100px;
height: 100px;
background-color: lime;
/* transition: all 3s; */
transition-property: width; /* 변화할 프로퍼티 속성*/
transition-duration: 3s; /* 변화 기간 */
transition-delay: 500ms; /* 변화 시작 하기 전 지연시간 */
transition-timing-function: linear; /* 변화하는 타이밍을 조절할 수 있습니다. cubic-bezier()를 검색합니다.*/
}
.box:hover {
width: 100%;
height: 200px;
background-color: blue;
}단계별로 transition을 적용할 수도 있습니다.
div위에 마우스를 올렸을때 적용한 예제
#wrap {
width: 900px;
margin: 0 auto;
}
.box {
width: 100px;
height: 100px;
background-color: lime;
/* transition: all 3s; */
transition-property: width; /* 변화할 프로퍼티 속성*/
transition-duration: 3s; /* 변화 기간 */
transition-delay: 500ms; /* 변화 시작 하기 전 지연시간 */
transition-timing-function: linear; /* 변화하는 타이밍을 조절할 수 있습니다. cubic-bezier()를 검색합니다.*/
transition: width 3s linear, height 1s 3s, background-color 2s 4s;
}
.box:hover {
width: 100%;
height: 200px;
background-color: blue;
}code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
}
#wrap {
width: 900px;
margin: 0 auto;
}
.box {
width: 100px;
height: 100px;
background-color: lime;
/* transition: all 3s; */
transition-property: width; /* 변화할 프로퍼티 속성*/
transition-duration: 3s; /* 변화 기간 */
transition-delay: 500ms; /* 변화 시작 하기 전 지연시간 */
transition-timing-function: linear; /* 변화하는 타이밍을 조절할 수 있습니다. cubic-bezier()를 검색합니다.*/
transition: width 3s linear, height 1s 3s, background-color 2s 4s;
}
.box:hover {
width: 100%;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box"></div>
</div>
</body>
</html>
서로 아는 것들을 공유해요~