소개
전환은 효과가 변경되었을 때 부드럽게 처리해주는 CSS의 기능입니다. 이와 관련된 것으로는 아래와 같은 속성들이 있습니다.
- transition-duration
- transition-property
- transition-delay
- transition-timing-function
- transition
전환의 기본 사용법
예제 - transition_1.html
<!doctype html>
<html>
<head>
<style>
a{
font-size:3rem;
display:inline-block;
/*
transition-property: font-size transform;
transition-duration: 0.1s;
transition:all 0.1s;
*/
transition:all 0.1s;
}
a:active{
transform:translate(20px, 20px);
font-size:2rem;
}
</style>
</head>
<body>
<a href="#">Click</a>
</body>
</html>
codepen.io
전환의 심화내용
예제 - transition_2.html
<!doctype html>
<html>
<head>
<style>
body{
background-color: black;
transition:all 1s;
}
div{
background-color: black;
color:white;
padding:10px;
width:100px;
height:50px;
-webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
-webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
-webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
div:hover{
height:400px;
}
</style>
</head>
<body onload="document.querySelector('body').style.backgroundColor='white';">
<div>
TRANSITION
</div>
</body>
</html>
