전환은 효과가 변경되었을 때 부드럽게 처리해주는 CSS의 기능입니다. 이와 관련된 것으로는 아래와 같은 속성들이 있습니다.
transition-duration
transition-property
transition-delay
transition-timing-function
transition
<!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>
클릭했을 때는 active 선택자를 쓴다
transform은 inline이거나 inline-block일때만 동작하므로 display값을 inline-block을 준다
transition-property:all로 하면 모든 효과에 대해서 변화가 일어났을 때 변화가 일어난다는 속성이다
transition-duration:1s는 1초동안 전환이 일어난단 뜻이다
전환의 심화내용
transition-duration:얼마동안 장면전환 효과가 진행될 것인가
transition-property:어떤 속성에 대해서 장면전환 효과가 적용될 것인가
transition-timing-function:전환의 속도를 불균형하게 조절
<!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>
댓글