Geçişler ve Hover Efektleri

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

Bir geçiş, bir özelliği anında değiştirmek yerine belirli bir süre boyunca pürüzsüz bir şekilde değiştirmenizi sağlar.

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

özellik: Geçişini yapmak istediğiniz CSS özelliği (örneğin, background-color, width, opacity).
süre: Geçişin tamamlanması için geçen süre (örneğin, 1 saniye için 1s).

timing-function: Geçişin nasıl ilerleyeceği (örneğin, linear, ease, ease-in).
delay: Geçiş başlamadan ö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;
}

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

Görev

Kolay

.card sınıfına bir transition özelliği ekleyin; böylece arka plan rengi ve box-shadow üzerindeki değişiklikler, 0.4 saniye içinde bir ease zamanlama fonksiyonu ile pürüzsüz bir şekilde gerçekleşsin.

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>