transition

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;

}

아무스 올리기전

마우스 올린 후

---

시간의 순서가 중요! duration, delay 순

---

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);

}