Membuat animasi Text fade-in and fade-out effect di CSS 3
Hai all, ketemu lagi bersama saya pria tampan asli sunda hehe2x, untuk tutorial kali ini saya akan membuat animasi text sederhana di CSS 3 yang mudah di mengerti, animasi text ini juga bisa di gunakan untuk loading aplikasi anda.
Ok langsung saja, coba lihat script HTML dibawah ini, perhatikan pada bagian class=”test”.
<span class='test'>A</span>
<span class='test'>N</span>
<span class='test'>D</span>
<span class='test'>E</span>
<span class='test'>Z</span>
<span class='test'>N</span>
<span class='test'>E</span>
<span class='test'>T</span>Setelah itu kita buat style css seperti dibawah ini tempat kan pada bagian head.
<style>
body, html {
text-align: center;
font-size: 90px;
font-family: Poiret One;
height: 100%;
background: -webkit-linear-gradient(315deg, #000000, #000000);
background: linear-gradient(135deg, #000000, #000000);
overflow: hidden;
color: white;
}
.test {
position: relative;
top: -webkit-calc(50% - 60px);
top: calc(50% - 60px);
text-shadow: 0px 0px 3px white;
}
.test:nth-child(1) {
-webkit-animation: fade 4s infinite 200ms;
animation: fade 4s infinite 200ms;
}
.test:nth-child(2) {
-webkit-animation: fade 4s infinite 400ms;
animation: fade 4s infinite 400ms;
}
.test:nth-child(3) {
-webkit-animation: fade 4s infinite 600ms;
animation: fade 4s infinite 600ms;
}
.test:nth-child(4) {
-webkit-animation: fade 4s infinite 800ms;
animation: fade 4s infinite 800ms;
}
.test:nth-child(5) {
-webkit-animation: fade 4s infinite 1000ms;
animation: fade 4s infinite 1000ms;
}
.test:nth-child(6) {
-webkit-animation: fade 4s infinite 1200ms;
animation: fade 4s infinite 1200ms;
}
.test:nth-child(7) {
-webkit-animation: fade 4s infinite 1400ms;
animation: fade 4s infinite 1400ms;
}
@-webkit-keyframes fade {
50% {
opacity: 0.02;
}
}
@keyframes fade {
50% {
opacity: 0.02;
}
}
</style>Nah selesai deh, kita bisa atur warna,waktu dan fade in & fade out pada css di atas, untuk sccript lengkapnya bisa di copy paste script dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Dashboard">
<meta name="keyword" content="css text">
<style>
body, html {
text-align: center;
font-size: 90px;
font-family: Poiret One;
height: 100%;
background: -webkit-linear-gradient(315deg, #000000, #000000);
background: linear-gradient(135deg, #000000, #000000);
overflow: hidden;
color: white;
}
.test {
position: relative;
top: -webkit-calc(50% - 60px);
top: calc(50% - 60px);
text-shadow: 0px 0px 3px white;
}
.test:nth-child(1) {
-webkit-animation: fade 4s infinite 200ms;
animation: fade 4s infinite 200ms;
}
.test:nth-child(2) {
-webkit-animation: fade 4s infinite 400ms;
animation: fade 4s infinite 400ms;
}
.test:nth-child(3) {
-webkit-animation: fade 4s infinite 600ms;
animation: fade 4s infinite 600ms;
}
.test:nth-child(4) {
-webkit-animation: fade 4s infinite 800ms;
animation: fade 4s infinite 800ms;
}
.test:nth-child(5) {
-webkit-animation: fade 4s infinite 1000ms;
animation: fade 4s infinite 1000ms;
}
.test:nth-child(6) {
-webkit-animation: fade 4s infinite 1200ms;
animation: fade 4s infinite 1200ms;
}
.test:nth-child(7) {
-webkit-animation: fade 4s infinite 1400ms;
animation: fade 4s infinite 1400ms;
}
@-webkit-keyframes fade {
50% {
opacity: 0.02;
}
}
@keyframes fade {
50% {
opacity: 0.02;
}
}
</style>
</head>
<title>Andeznet</title>
<span class='test'>A</span>
<span class='test'>N</span>
<span class='test'>D</span>
<span class='test'>E</span>
<span class='test'>Z</span>
<span class='test'>N</span>
<span class='test'>E</span>
<span class='test'>T</span>
</body>
</html>Selesai deh, untuk DEMO nya bisa cek link nya disini
Terima kasih.
Jasa Pembuatan Aplikasi web contact person email:admin@andeznet.com atau chat di sebelah pojok kanan website
