Geçişler ve Hover Efektleri

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

Geçiş, bir özelliği aniden değiştirmek yerine zaman içinde yumuşak bir şekilde değiştirmeni sağlar.

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

özellik: Geçiş uygulamak istediğin CSS özelliği (ör. background-color, width, opacity).
süre: Geçişin tamamlanması için gereken 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ş 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;
}

Düğmenin üzerine geldiğinde, arka plan rengi 0.3 saniyede yeşilden maviye dönüşür.

Birden fazla özelliğe geçiş uygulamak için bunları tek bir transition bildiriminde virgüllerle ayırarak listele (ikinci bir transition satırı ilk satırın yerini alır):

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

Görev

Kolay

Arka plan rengindeki ve kutu gölgesindeki değişikliklerin ease zamanlama işleviyle 0.4 saniye boyunca yumuşakça gerçekleşmesi için .card öğesine bir transition özelliği ekle.

Ardından, geçişin canlandırabileceği bir şey olması için kartın arka plan rengini ve kutu gölgesini değiştiren bir .card:hover kuralı ekle.

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>