will-change, bir elementin hangi özelliklerinin değişebileceğini önceden belirleyerek tarayıcının bu özelliklere daha fazla kaynak tahsis etmesini sağlayan bir özelliktir. Bu, web sayfalarının daha hızlı çalışmasına yardımcı olur.

Bir öğenin will-change özelliği, bir sonraki animasyon veya geçiş sırasında kullanılacak özellikleri belirtir. Mesela, bir öğenin will-change: transform özelliği belirtilirse, bu elementin bir sonraki animasyon sırasında dönüşüm işleminin yapılacağı anlamına gelir. Bu özellik, tarayıcının öğenin dönüşüm işlemleri için daha fazla bellek tahsis etmesine ve böylece animasyonun daha akıcı olmasına yardımcı olur.

will-change özelliğinin yanlış kullanımı web sayfalarının performansını etkileyebilir. Çünkü herhangi bir öğenin will-change özelliği kullanıldığında, tarayıcı o elementin değiştirilmesi gereken tüm özellikler için bellek ayırır. Bu, gereksiz yere kaynak tüketebilir ve doğal olarak web sayfasının yavaşlamasına neden olabilir.

Bu nedenle, sadece gerekli durumlarda kullanılmalıdır.

Örnek küçük bir gösterim; mouse hover ile kartın görünümünü değiştiren bir animasyon yapalım ve will-change özelliğini kullanarak animasyonun daha akıcı olmasını sağalayalım.

<div class="card">
  <img src="https://fastly.picsum.photos/id/620/536/354.jpg?hmac=_2pm-B21Zzjfs_NH_75cY2sC0odhWQbKUMU9oCHoyh4" alt="Card Image">
  <div class="card-content">
    <h3>Card Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#">Read More</a>
  </div>
</div>

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 300px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
// burası çokomelli
  will-change: transform; 
}
.card:hover {
  transform: translateY(-10px);
}
.card img {
  width: 100%;
}
.card-content {
  padding: 20px;
  background-color: #fff;
}
.card-content h3 {
  margin: 0;
  font-size: 20px;
}
.card-content p {
  margin: 10px 0;
  font-size: 16px;
}
.card-content a {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}
.card-content a:hover {
  background-color: #fff;
  color: #000;
}

Yukarıdaki CSS kodu, kart öğesinin will-change özelliği kullanarak transform özelliğinin değiştirileceğini belirtir. .card:hover seçicisi altında ise, kart bir hover olayı gerçekleştiğinde translateY(-10px) değeri ile animasyonlu bir şekilde yukarıya doğru hareket eder.

https://codepen.io/alptekinenes/pen/ExeoXjW

Özet olarak bu örnekte will-change özelliği kullanarak, kart öğesinin bir sonraki animasyonda transform özelliğinin daha akıcı olması için daha fazla bellek tahsis edilir.

Akış olarak devamınnda kartın içeriği dinamik olarak yüklenir ve CSS Flexbox kullanılarak düzenlenir. Kartın içeriği, kartın boyutuna ve düzenine uyacak şekilde otomatik olarak ayarlanır. Kartın içeriği aynı zamanda, hover olayında görüntülenen buton dahil olmak üzere, kullanıcının etkileşimine yönelik animasyonlu öğeler içermiş olur.

✨