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