Senin, 03 Maret 2014

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/

Tidak ada komentar:

Posting Komentar