[CSS] hover & transition & transition-delay

/*BUTTON*/

.btn {

  width: 130px;

  padding: 10px;

  border: 2px solid #333;

  border-radius: 4px;

  color: #333;

  font-size: 16px;

  font-weight: 700;

  text-align: center;

  cursor: pointer;

  box-sizing: border-box;

  display: block;

  transition: .4s;

}

.btn:hover {

  background-color: #333;

  color: #FFF;

}

다음과 같은 코드가 있다.

다음 코드의 뜻은 다음과 같다.

버튼 위에 마우스를 올려놓으면, 버튼 색깔을 0.4s에 걸쳐 변경하라.

hover는 마우스 커서가 해당 오브젝트 위에 있을 때라는 뜻이다.

transition은 변경되는 시간을 표시한다.

 

 

반면 transition-delay라는 것이 있다.

이것은 전환 효과 대기 시간이다.