전환 transition
전환은 element가 조건에 따라 변화할 때 어떤 element를 변화시킬지, 어떻게 변화시킬지를 설정하는 기능이다.
- transition-property : all; - transition을 할 element를 지정할 수 있다. 모두는 all, 여러개는 띄어쓰기로 구분해서 설정한다.
- transition-duration : 1s; - transition이 이루어지는 시간을 설정한다.
- transition-delay : 1s; - transition을 늦추는 설정을 한다.
- transition-timing-function : ease; - ease가 기본값이며 그 외에는 linear, cubic-bezier()를 사용하여 설정할 수 있다.
참고 사이트 Ceaser - transition : all 0.1s; - 한번에 설정할 수 있다.
transition 예시1 - hover 사용
<!doctype html>
<html>
<head>
<style>
#test{
font-size: 3rem;
display : inline-block;
transition-property: all;
transition-duration: 1s;
transition-delay: 0.5s;
transition-timing-function: linear;
}
#test:hover{
transform : translate(20px,20px);
font-size : 2rem;
}
</style>
</head>
<body>
<div id="test"> hello </div>
</body>
</html>- 유의할 점
- transform은 element가 block-level 이거나 inline-block일 때만 동작하기 때문에 display : inline-block;으로 설정 해주어야 한다.
- hover는 마우스를 올려두었을 때 active는 마우스로 클릭했을 때 동작한다는 의미다.
transition 예시2 - javascript 사용
<!doctype html>
<html>
<head>
<style>
body{
background-color: powderblue;
transition : all 2s;
}
div{
background-color: powderblue;
color: white;
width: 400px;
height: 200px;
font-size: 2rem;
text-align: center;
padding: 10px;
}
</style>
</head>
<body onload="document.querySelector('body').style.backgroundColor='white';">
<div>transition</div>
</body>
</html>- 화면 로드가 다 되면 body의 배경이 powderblue로 2초 동안 변화되는 기능이다.
