Css ile “Shake” animasyonu – “Shake” animation with CSS

CSS ile yapılabilecek birçok şey var tabiki. Zaman buldukça ufak ufak paylaşıyorum. Hem not etmiş olayım hem de isteyen kullanabilsin.

“Shake” yani titreşim, sallama hareketi gibi bir animasyon efekti vermek için kullanılıyor. Bu örnekte bir div içerisinde bulunan nesnelere titreşim efekti vermeye çalışaçağız. Bu nesne ne olursa olsun farketmez. Resim, yazı, tablo, video ve s.

Önemli olan belirtmiş olduğumuz sınıfı barındıran div içerisinde olması.

Öncelikle CSS kodlarımızı yazalım:

.shake:hover {
  animation: animasyonAdi 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes animasyonAdi {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

Burada animasyonumuzun adını anlamanız için “animasyonAdi” olarak belirttim. Kullanıdığımız sınıf ise “shake” oldu. Shake sınıfı içerisinde animasyon adını belirttik ve animasyonumuzu yüzdelik dilimlere göre hareketlendirdik. Hareketlendirme için ise “transform: translate3d” kodlarını kullandık.

Şimdi HTML kodlarımızı yazalım:

<div class="shake">
<img src="https://www.anarsamadov.net/wp-content/themes/anar/images/logo.png">
</div>

Gördüğünüz gibi sadece bir div elementi ekledik. Bu elementimiz shake sınıfını kullandığı için içerisindeki nesnelere titreşim efekti vermiş olduk.

Örneği burada deneyebilirsiniz: