A 상태가(css) ------> B 상태(css) 로 시간차를 두고 자연스럽게 전환된다.
transition-property (어떤요소)
특정 css만 바꾸겠다.
all: 모든 css를 바꾸겠다
none: 아무것도 바꾸지 않겠다
transition-duration (얼마만큼의 시간을 가지고)
<time> s, ms(밀리세컨 0.5s = 500ms)
<div class="box">
Hover!
.box {
width: 600px;
height: 80px;
border: 2px dashed teal;
background-color: darkslategray;
font-size: 50px;
color: white;
trandition-property:all;
transition-duration: 0.5s;
}
.box:hover {
background-color: indianred;
color: black;
font-size: 60px;
}
transition + transform
<div class="box">
Hover!
</div>
.box {
width:100px;
height: 100px;
border: 10px solid seagreen;
background-color: rgb(204,253,225);
border-radius: 30px;
transition: all 3s ease-in-out;
}
.box:hover {
transform: rotate(360deg) translateY(30px, 30px);
}
