Trembling Text Effect

Animated Effect For Text - Trembling Effect
Efek teks berikut ini, saya menggunakan CSS animasi-duration. Sedangkan efek gerak dengan CSS type transform:translate-rotate.

Temukan kode ]]></b:skin> pada Template Anda, lalu letakkan CSS ini tepat diatasnya:

CSS Concept

.text {
font-weight:900;
font-family: 'Bowlby One SC', cursive;
font-size:55px;
margin:0 auto;
font-weight:light;
line-height:74px;
color:blue;
text-align:center;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: tremble;

-moz-animation-duration: 0.8s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: tremble;

-ms-animation-duration: 0.8s;
-ms-transform-origin:50% 50%;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-ms-animation-name: tremble;

-o-animation-duration: 0.8s;
-o-transform-origin:50% 50%;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-name: tremble;

animation-duration: 0.8s;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: tremble;
text-shadow: 5px 5px 0 #D8C358, 8px 8px 0 #25271E, 13px 13px 0 #D8C358, 20px 20px 0 #25271E;}

@-webkit-keyframes tremble {
0% {-webkit-transform: translate(2px, 1px) rotate(0deg);}
10% {-webkit-transform: translate(-1px, -2px) rotate(-1deg);}
20% {-webkit-transform: translate(-3px, 0px) rotate(1deg);}
30% {-webkit-transform: translate(0px, 2px) rotate(0deg);}
40% {-webkit-transform: translate(5px, -1px) rotate(1deg);}
50% {-webkit-transform: translate(-1px, 2px) rotate(-1deg);}
60% {-webkit-transform: translate(-2px, 1px) rotate(0deg);}
70% {-webkit-transform: translate(6px, 2px) rotate(-1deg);}
80% {-webkit-transform: translate(-1px, -3px) rotate(1deg);}
90% {-webkit-transform: translate(2px, 1px) rotate(0deg);}
100% {-webkit-transform: translate(5px, -2px) rotate(-1deg);}}

@-moz-keyframes tremble {
0% {-moz-transform: translate(2px, 1px) rotate(0deg);}
10% {-moz-transform: translate(-1px, -2px) rotate(-1deg);}
20% {-moz-transform: translate(-3px, 0px) rotate(1deg);}
30% {-moz-transform: translate(0px, 2px) rotate(0deg);}
40% {-moz-transform: translate(5px, -1px) rotate(1deg);}
50% {-moz-transform: translate(-1px, 2px) rotate(-1deg);}
60% {-moz-transform: translate(-2px, 1px) rotate(0deg);}
70% {-moz-transform: translate(6px, 2px) rotate(-1deg);}
80% {-moz-transform: translate(-1px, -3px) rotate(1deg);}
90% {-moz-transform: translate(2px, 1px) rotate(0deg);}
100% {-moz-transform: translate(5px, -2px) rotate(-1deg);}}

@keyframes tremble {
0% {transform: translate(2px, 1px) rotate(0deg);}
10% {transform: translate(-1px, -2px) rotate(-1deg);}
20% {transform: translate(-3px, 0px) rotate(1deg);}
30% {transform: translate(0px, 2px) rotate(0deg);}
40% {transform: translate(5px, -1px) rotate(1deg);}
50% {transform: translate(-1px, 2px) rotate(-1deg);}
60% {transform: translate(-2px, 1px) rotate(0deg);}
70% {transform: translate(6px, 2px) rotate(-1deg);}
80% {transform: translate(-1px, -3px) rotate(1deg);}
90% {transform: translate(2px, 1px) rotate(0deg);}
100% {transform: translate(5px, -2px) rotate(-1deg);}}

DEMO SHOW

HTML Markup