Merubah Teks Otomatis (CSS Keyframes)

Merubah Teks Otomatis (CSS Keyframes)

Untuk artikel kali ini kita akan mencoba membuat sebuah efek namun hanya dengan menggunakan HTML dan CSS saja tanpa JavaScript atau pun library jQuery. Efek yang akan dicoba adalah efek animasi teks sederhana dengan menggunakan CSS Keyframes.

Untuk tutorial dengan menggunakan CSS Keyframes sendiri sudah pernah dibahas pada artikel membuat efek ketikan, selanjutnya yang akan kita coba saat ini adalah membuat efek animasi teks berubah secara otomatis.

Sebagai referensi kalian bisa menuju ke CSS Keyframes yang ada di situs w3school. Hasil jadinya sudah seperti kalian lihat diatas, yang terpenting dari pembuatan efek ini adalah CSS Keyframes, kalian bisa menambahkan atau mengurangi sesuai dengan kebutuhan tentunya. Terima kasih dan sampai jumpa lagi pada artikel selanjutnya.

Untuk skripnya adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Merubah Teks dengan Animasi CSS | Kursus Web YELLOWWEB</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div id="wrapper">
		<h2>Belajar Web <span></span></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua.</p>
		<a href="https://www.yellowweb.id" target="_blank">Disini</a>
	</div><!-- end of wrapper -->

</body>
</html>
/* Changing Text Efect */
@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');

*{
	padding: 0;
	margin: 0;
}

body{
	background-image: url('https://images.pexels.com/photos/167762/pexels-photo-167762.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 100vh;
	font-family: 'Righteous', cursive;
	color: #ffffff;
	font-size: 17px;
}

#wrapper{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#wrapper h2{
	color: #ffffff;
	font-size: 40px;
}

#wrapper p{
	line-height: 30px;
}

#wrapper a{
	background-color: #e84393;
	padding: 10px 25px;
	display: inline-block;
	border-radius: 5px;
	margin-top: 30px;
	text-decoration: none;
	color: #ffffff;
}

span::before{
	content: '';
	animation: animate infinite 5s;
	color: #fdcb6e;
	background-color: #000000;
	padding: 0 5px;
}

@keyframes animate{
	0%{
		content: 'Web Designer';
	}

	25%{
		content: 'Web Programmer';
	}

	50%{
		content: 'Web Master';
	}

	75%{
		content: 'Digital Marketing';
	}

	100%{
		content: 'All about web,...';
	}
}