트랜지션 및 호버 효과

Coddy HTML 여정의 CSS 마스터 섹션에 포함된 레슨. 43개 중 24번째.

property를 즉시 변경하는 대신 시간에 따라 부드럽게 변경할 수 있게 해 주는 것이 transition입니다.

selector {
  transition: property duration timing-function delay;
}

property: 전환하려는 CSS 속성입니다(예: background-color, width, opacity).
duration: 전환이 완료되는 데 걸리는 시간입니다(예: 1초에는 1s).

timing-function: transition이 진행되는 방식(예: linear, ease, ease-in).
delay: transition을 시작하기 전에 기다릴 시간(선택 사항).

예:

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

button 위에 hover하면 background color가 green에서 blue로 0.3초 over 변경됩니다.

챌린지

쉬움

.card에 transition property를 추가하여 background color와 box-shadow의 변경이 ease timing function을 사용해 0.4초에 걸쳐 부드럽게 일어나도록 하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Write your CSS here */
    .card {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
  </style>
</head>
<body>
  <div class="card">
    Hover over me!
  </div>
</body>
</html>