트랜지션 및 호버 효과

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

전환을 사용하면 속성이 즉시 바뀌는 대신 시간에 걸쳐 부드럽게 바뀌도록 할 수 있습니다.

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

속성: 전환하려는 CSS 속성(예: background-color, width, opacity).
지속 시간: 전환이 완료되는 데 걸리는 시간(예: 1초를 나타내는 1s).

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

예를 들면:

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

버튼 위에 마우스를 올리면 배경색이 0.3초에 걸쳐 녹색에서 파란색으로 바뀝니다.

둘 이상의 속성을 전환하려면 하나의 transition 선언에 쉼표로 구분하여 나열하세요(두 번째 transition 줄은 첫 번째 줄을 대체합니다).

transition: width 0.3s ease, opacity 0.3s ease;

챌린지

쉬움

.card에 transition 속성을 추가하여 배경색과 box-shadow가 ease 타이밍 함수로 0.4초 동안 부드럽게 바뀌도록 하세요.

그런 다음 카드의 배경색과 box-shadow를 변경하는 .card:hover 규칙을 추가하여 전환 효과가 애니메이션할 대상이 있도록 하세요.

직접 해보기

<!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>