Merhaba bloğumun sevgi ve saygıdeğer takipçileri. Bu yazımda sizlere yabancı kaynaklarda rastlamış olduğum sarsıntı efektini nasıl kullanabileceğinizi anlatacağım.

Sarsıntı efekti olarak kastettiğim şey tam olarak aşağıdaki gibidir. Resimlerde ve yazılarda kullanılan güzel bir özellik.

Demo görüntüyü buraya ekleyemediğim için bu linkten görebilirsininiz.

Nasıl Kullanılır ?

Nasıl kullanılacağına gelecek olursak face isminde bir div oluşturuyorsunuz ve aşağıdaki kodları stil dosyanıza ekliyorsunuz.

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

@keyframes shake {
 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);
 }
}

Kaynak