alexa  Menu
shake animation with css

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

  17.07.2018 ,   1 yorum ,   5.908 kez okundu.

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:

1 yorum yapılmış

    mustafa soysal

    gayet faydalı bir paylaşım.projelerimde kullanacağım teşekkürler GARDAŞ..

    08.12.2019, 15:25:29

mustafa soysal için bir yanıt yazın Yanıtı iptal et

isim yerine gerçek isim ve soyisim yazılmadan yapılan yorumlar kesinlikle onaylanmıyor bilginiz olsun.


The reCAPTCHA verification period has expired. Please reload the page.


%d blogcu bunu beğendi: