Geçişler ve Hover Efektleri

Coddy'nin HTML Journey'sinin CSS Hakimiyeti bölümünün bir parçası. Ders 24 / 43.

Bir geçiş, bir özelliği anında değiştirmek yerine zaman içinde yumuşak bir şekilde değiştirmenizi sağlar.

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

property: Geçiş yapmak istediğiniz CSS özelliği (ör. background-color, width, opacity).
duration: Geçişin tamamlanmasının aldığı süre (ör. 1 saniye için 1s).

timing-function: Geçişin nasıl ilerlediği (ör. linear, ease, ease-in).
delay: Geçişi başlatmadan önce ne kadar bekleneceği (isteğe bağlı).

Örneğin:

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

Düğmenin üzerine geldiğinizde, arka plan rengi 0,3 saniye içinde yeşilden maviye değişecektir.

Görev

Kolay

.card öğesine, arka plan rengindeki ve kutu gölgesindeki değişikliklerin ease zamanlama işleviyle 0.4 saniye içinde yumuşak bir şekilde gerçekleşmesini sağlayacak bir transition özelliği ekleyin.

Kendin dene

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