Teks Animasi

1. Animasi ke-1

Script:

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Supermercado+One');
* {margin: 0; padding: 0}
#wrapper {
width: 500px;
margin: auto;
padding: 5px;

background: transparent;
font-family: 'Supermercado One', cursive;
}


.text {
position: relative;
display: inline-block;
font-size: 3rem;
text-transform: uppercase;
color: #244D49;
text-shadow: 3px 3px 0px #D7DACC, 8px 8px 0px rgba(0, 0, 0, 0.1);
}
</style>
<div id="wrapper">
<h1 class="text">Welcome To My Blog</h1>
</div>

Hasil:

Welcome To My Blog

2. Animasi ke-2

Script:

<style type="text/css">
#highlight{font:bold 50px Impact,Arial,Sans-Serif;}
</style>
<script language="javascript" type="text/javascript">
var teks="Welcome To My Blog"
var speed=20 // atur kecepatan perubahan warna

if (document.all||document.getElementById) {
document.write('<span id="highlight">' + teks + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") :
document.all.highlight
} else document.write(text)
var hex=new
Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")

var r=1
var g=1
var b=1
var seq=1

function changetext() {
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}

function change() {
if (seq==6) {
b--
if (b==0)
seq=1
}
if (seq==5) {
r++
if (r==12)
seq=6
}
if (seq==4) {
g--
if (g==0)
seq=5
}
if (seq==3) {
b++
if (b==12)
seq=4
}
if (seq==2) {
r--
if (r==0)
seq=3
}
if (seq==1) {
g++
if (g==12)
seq=2
}
changetext()
}

function starteffect() {
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}

starteffect()
</script>

Hasil:

3. Animasi ke-3

Script:

<style type="text/css">
.anim-blink {
color: white;
margin:0 auto;
font-size: 35px;
position: relative;}

@keyframes noise-anim {
0% {clip: rect(3px, 9999px, 77px, 0);}
5% {clip: rect(92px, 9999px, 90px, 0);}
10% {clip: rect(20px, 9999px, 53px, 0);}
15.0% {clip: rect(49px, 9999px, 67px, 0);}
20% {clip: rect(98px, 9999px, 83px, 0);}
25% {clip: rect(81px, 9999px, 18px, 0);}
30.0% {clip: rect(79px, 9999px, 34px, 0);}
35% {clip: rect(33px, 9999px, 33px, 0);}
40% {clip: rect(3px, 9999px, 48px, 0);}
45% {clip: rect(30px, 9999px, 65px, 0);}
50% {clip: rect(59px, 9999px, 34px, 0);}
55.0% {clip: rect(59px, 9999px, 70px, 0);}
60.0% {clip: rect(22px, 9999px, 49px, 0);}
65% {clip: rect(1px, 9999px, 51px, 0);}
70% {clip: rect(76px, 9999px, 88px, 0);}
75% {clip: rect(49px, 9999px, 75px, 0);}
80% {clip: rect(74px, 9999px, 84px, 0);}
85.0% {clip: rect(95px, 9999px, 76px, 0);}
90% {clip: rect(97px, 9999px, 1px, 0);}
95% {clip: rect(91px, 9999px, 89px, 0);}
100% {clip: rect(15px, 9999px, 17px, 0);}}

.anim-blink:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -3px 5px red;
top: 0;
color: white;
background: transparent;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;}

@keyframes noise-anim-2 {
0% {clip: rect(99px, 9999px, 75px, 0);}
5% {clip: rect(27px, 9999px, 55px, 0);}
10% {clip: rect(2px, 9999px, 33px, 0);}
15.0% {clip: rect(75px, 9999px, 57px, 0);}
20% {clip: rect(12px, 9999px, 84px, 0);}
25% {clip: rect(98px, 9999px, 13px, 0);}
30.0% {clip: rect(50px, 9999px, 25px, 0);}
35% {clip: rect(70px, 9999px, 48px, 0);}
40% {clip: rect(71px, 9999px, 8px, 0);}
45% {clip: rect(8px, 9999px, 99px, 0);}
50% {clip: rect(11px, 9999px, 2px, 0);}
55.0% {clip: rect(33px, 9999px, 49px, 0);}
60.0% {clip: rect(74px, 9999px, 86px, 0);}
65% {clip: rect(52px, 9999px, 62px, 0);}
70% {clip: rect(30px, 9999px, 88px, 0);}
75% {clip: rect(46px, 9999px, 14px, 0);}
80% {clip: rect(86px, 9999px, 68px, 0);}
85.0% {clip: rect(42px, 9999px, 24px, 0);}
90% {clip: rect(91px, 9999px, 57px, 0);}
95% {clip: rect(57px, 9999px, 60px, 0);}
100% {clip: rect(78px, 9999px, 67px, 0);}}

.anim-blink:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 3px 5px #39f;
top: 0;
color: white;
background: transparent;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse;}
</style>
<div class="anim-blink" data-text="Welcome To My Blog">
Welcome To My Blog</div>

Hasil:

Welcome To My Blog

4. Animasi ke-4

Script:

<style>

h3 {
text-align: center;
background: red;
transition: all 3s cubic-bezier(.14,.93,.69,.06);
color: white;
cursor: pointer;
}
h3:hover {
width: 300px;
}

</style>
<body>
<h3>Welcome To My Blog</h3>
</body></div>

Hasil:

Welcome To My Blog