Merubah Teks (CSS Keyframes)

Merubah teks secara otomatis dengan menggunakan animasi CSS Keyframes

by Miftah Faroq

HTML

<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 -->

CSS

/* 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,...';
	}
}