CSS

TUTORIAL CSS3 Anmimation (keyframse)

Oke kali ini saya ingin berbagi cara membuat animasi dengan menggunakan CSS3, khususnya menggunakan keyframes.

Sebelumnya saya akan membahas pengertian dari keyframes. Keyframe bisa di bilang aturan waktu dalam animasi yang kita buat, maksudnya tiap detik ke berapa animasi itu berubah. Misalnya pada detik 1 animasi itu berwarna merah dan detik ke 2 akan berwarna orange. Nah pengaturan itu ada di dalam keyframe.

Contoh CSS3 Keyframes Text Animasi :

1). Text Animasi Warna

ELMANSYAH

Html :

< div id="animasiwarna">ELMANSYAH< /div>

CSS :

#animasiwarna{
text-align:center;
color: rgba(0, 0, 255, 0.3 );
font: 50px comic san ms;
-webkit-animation: animasiwarna 10s linear infinite;
height: 100px;
text-shadow: 0 1px 1px transparent;
}

@-webkit-keyframes animasiwarna {
0% { -webkit-transform:(1,0); }
20% { color: #fa5b1e; }
40% { color: #f4b61f; }
60% { color: #b2c831; }
80% { color: #20a0dc; }
100% { color: #8786bd; }
}

@-moz-keyframes animasiwarna {
0% { color: #8d1312; }
20% { color: #fa5b1e; }
40% { color: #f4b61f; }
60% { color: #b2c831; }
80% { color: #20a0dc; }
100% { color: #8786bd; }
}

2). Text Animasi Rotate

ELMANSYAH

Html :

< div id="animasirotate">ELMANSYAH< /div>

CSS :

#animasirotate{
text-align:center;
color: #000;
font: 25px comic san ms;
-webkit-animation: animasirotate 10s linear infinite;
text-shadow: 0 1px 1px transparent;
}

@-webkit-keyframes animasirotate {
0% { -webkit-transform:rotate(0deg); }
25% { -webkit-transform:rotate(90deg); }
50% { -webkit-transform:rotate(180deg); }
75% { -webkit-transform:rotate(270deg);}
100% { -webkit-transform:rotate(360deg); }
}

@-moz-keyframes animasirotate {
0% { -moz-transform:rotate(0deg); }
25% { -moz-transform:rotate(90deg); }
50% { -moz-transform:rotate(180deg); }
75% { -moz-transform:rotate(270deg);}
100% { -moz-transform:rotate(360deg); }
}

3). Text Animasi Scale

ELMANSYAH

Html :

< div id="animasiscale">ELMANSYAH< /div>

CSS :

#animasiscale{
text-align:center;
color: #000;
font: 40px comic san ms;
text-shadow: 0 1px 1px transparent;
-webkit-animation: animasiscale 10s linear infinite;
margin: 30px;
}

@-webkit-keyframes animasiscale {
0% { -webkit-transform:scale(1,1); }
25% { -webkit-transform:scale(-1,1); }
50% { -webkit-transform:scale(1,1); }
75% { -webkit-transform:scale(1,-1); }
100% { -webkit-transform:scale(1,1);}
}

@-moz-keyframes animasiscale {
0% { -moz-transform:scale(1,1); }
25% { -moz-transform:scale(-1,1); }
50% { -moz-transform:scale(1,1); }
75% { -moz-transform:scale(1,-1); }
100% { -moz-transform:scale(1,1);}
}

Cukup sekian penjelasan tentang CSS3 Keyframes (Text Animation).


Sumber : http://www.djogzs.com