Free Ten Style CSS Shake use CSS/Sass

Ada yang bilang vibrates effect atau shake effect untuk membuat hasil getaran-getaran pada sebuah konten. Satu yang pasti AA Koben akan berbagi sepuluh jenis efek CSS shake buat kalian b-) Sedangkan pada web source elrumordelaluz.github.io/csshake banyak variasi yg bisa kita rangkai agar efek menjadi lebih full stylish! Seperti gue katakan sebelumnya, 10 gaya dasar efek dari web CSS shake menggunakan bahasa CSS akan AA berikan buat ente-ente pade ;))

Jangan lupa sorot yah pake mouse cursor . . .

Basic Shake

Basic

.shake {
transform-origin: center center;
}
.shake:hover {
animation-name: shake-base;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-base {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0.5px, 0.5px) rotate(2.5deg);
}
50% {
transform: translate(1.5px, 1.5px) rotate(-1.5deg);
}
75% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
}
100% {
transform: translate(2.5px, 2.5px) rotate(-2.5deg);
}
}

Slow Shake

Slow

.shake {
transform-origin: center center;
}
.shake-slow:hover {
animation-name: shake-slow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-slow {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0.5px, 0.5px) rotate(2.5deg);
}
50% {
transform: translate(1.5px, 1.5px) rotate(-1.5deg);
}
75% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
}
100% {
transform: translate(2.5px, 2.5px) rotate(-2.5deg);
}
}

Little Shake

Little

.shake {
transform-origin: center center;
}
.shake-little:hover {
animation-name: shake-little;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-little {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0.5px, 0.5px) rotate(1deg);
}
50% {
transform: translate(1px, 1px) rotate(-1deg);
}
75% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
}
100% {
transform: translate(0.5px, 0.5px) rotate(-1deg);
}
}

Hard Shake

Hard

.shake {
transform-origin: center center;
}
.shake-hard:hover {
animation-name: shake-hard;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-hard {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(-6px, 7px) rotate(0.5deg);
}
50% {
transform: translate(9px, 1px) rotate(-3.5deg);
}
75% {
transform: translate(4px, -10px) rotate(3.5deg);
}
100% {
transform: translate(4px, -10px) rotate(-0.5deg);
}
}

Fixed Horizontal

F. Hor

.shake {
transform-origin: center center;
}
.shake-horizontal:hover {
animation-name: shake-horizontal;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-horizontal {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(1px, 0px) rotate(0deg);
}
50% {
transform: translate(-9px, 0px) rotate(0deg);
}
75% {
transform: translate(-3px, 0px) rotate(0deg);
}
100% {
transform: translate(-7px, 0px) rotate(0deg);
}
}

Fixed Vertical

F. Ver

.shake {
transform-origin: center center;
}
.shake-vertical:hover {
animation-name: shake-vertical;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-vertical {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0px, 1px) rotate(0deg);
}
50% {
transform: translate(0px, -8px) rotate(0deg);
}
75% {
transform: translate(0px, -4px) rotate(0deg);
}
100% {
transform: translate(0px, -8px) rotate(0deg);
}
}

Fixed Rotation

F. Rot

.shake {
transform-origin: center center;
}
.shake-rotate:hover {
animation-name: shake-rotate;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-rotate {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0px, 0px) rotate(-1.5deg);
}
50% {
transform: translate(0px, 0px) rotate(2.5deg);
}
75% {
transform: translate(0px, 0px) rotate(-2.5deg);
}
100% {
transform: translate(0px, 0px) rotate(-0.5deg);
}
}

Opacity Shake

Opaci.

.shake {
transform-origin: center center;
}
.shake-opacity:hover {
animation-name: shake-opacity;
animation-duration: 200ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-opacity {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(3px, -4px) rotate(0.5deg);
opacity: 0.1;
}
50% {
transform: translate(-2px, 4px) rotate(-2.5deg);
opacity: 0.8;
}
75% {
transform: translate(-4px, -5px) rotate(-1.5deg);
opacity: 0;
}
100% {
transform: translate(1px, -4px) rotate(0.5deg);
opacity: 0.8;
}
}

Crazy Shake

Crazy

.shake {
transform-origin: center center;
}
.shake-crazy:hover {
animation-name: shake-crazy;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-crazy {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(-10px, -18px) rotate(-1deg);
opacity: 0;
}
50% {
transform: translate(5px, 13px) rotate(-2deg);
opacity: 0.4;
}
75% {
transform: translate(12px, -12px) rotate(1deg);
opacity: 0.3;
}
100% {
transform: translate(16px, 6px) rotate(-9deg);
opacity: 0.6;
}
}

Constant Shake

Const.

.shake {
transform-origin: center center;
}
.shake-constant {
animation-name: shake-constant;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-constant {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0.5px, 0.5px) rotate(2.5deg);
}
50% {
transform: translate(1px, 1px) rotate(-1.5deg);
}
75% {
transform: translate(1.5px, -1.5px) rotate(1.5deg);
}
100% {
transform: translate(2.5px, -2.5px) rotate(-2.5deg);
}
}

Syntax penggunaan, perhatikan saja default (basic shake)<div class="shake">Blah Bleh Bloh</div>Sobat tinggal tambahkan pada bagian belakang di dalam selektor class.
Ex:<div class="shake shake-slow">Blah Bleh Bloh</div>Kalau getarannya mau lebih banyak, pada variabel @keyframes harus sobat rubah sesuai mau berapa biji dalam mode persentase (%) Atur-atur dan pelajari saja deh and jangan lupa di fix kode keyframes agar support pada browser engine :D

Happy shake \m/