Animasi merupakan hal yang perlu dalam sebuah tampilan website. Animasi sangat dibutuhkan untuk memberikan kesan menarik bagi pengguna website kita. Pada kasus ini kursus css private online ingin membagikan tutorial tentang Cara Membuat Animasi Background Dengan CSS. Ya animasi background sederhana ini nanti bisa sahabat kembangkan lagi agar semakin lebih mantap.

Langsung saja ikuti langkah-langkah dibawah ini untuk membuat Animasi Background Dengan CSS.

Pertama, sahabat buat file html yang berisi code berikut:

<div class="container">
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="content">
		<h3>Animasi Background Pure CSS</h3>
	</div>

Pada code diatas terdapat 3 buah class dimana class:container sebagai parent dari class:circle, jadi class circle ini nanti yang akan dibuat animasi background.

Kedua, sahabat kursus css private online tambahkan stlye CSS untuk membuat animasi y,silahkan ketikkan code berikut:

body,html{height: 100%;width: 100%}
body{margin:0;padding: 0;background: #943131}
.container{
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	top:0;
	left: 0;
}
.content{
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.content h3{
	color: #00fff3;
	font-size: 35px;
	text-transform: uppercase;
	border-top: 5px solid #ffffff;
	border-bottom: 5px solid #ffffff;
}
.circle{
	position: absolute;
	bottom: -100px;
	background: #f2f2f2;
	opacity: 0.5;
	animation: bubble 15s infinite ease;
}
.circle:nth-child(1){
	width: 75px;
	height: 75px;
	border-radius:50%;
	left:7%;
	animation-delay: 1s;
}
.circle:nth-child(2){
	width: 80px;
	height: 80px;
	border-radius:50%;
	left:20%;
	animation-delay: 5s;
}
.circle:nth-child(3){
	width: 62px;
	height: 62px;
	border-radius:50%;
	left:50%;
	animation-delay: 9s;
}
.circle:nth-child(4){
	width: 55px;
	height: 55px;
	border-radius:50%;
	left:90%;
	animation-delay: 2s;
}
.circle:nth-child(5){
	width: 60px;
	height: 60px;
	border-radius:50%;
	left:10%;
	animation-delay: 10s;
}
.circle:nth-child(6){
	width: 55px;
	height: 55px;
	border-radius:50%;
	left:5%;
	animation-delay: 5s;
}
.circle:nth-child(7){
	width: 70px;
	height: 70px;
	border-radius:50%;
	left:30%;
	animation-delay: 9s;
}
.circle:nth-child(8){
	width: 90px;
	height: 90px;
	border-radius:50%;
	left:75%;
	animation-delay: 3s;
}

@keyframes bubble{
	0%{
		bottom: -100px;
		transform: translateX(0);
	}
	25%{
		transform: translateY(50px);
	}
	50%{
		transform: translateX(100px);
	}
	75%{
		transform: translateY(75px);
	}
	100%{
		bottom: 550px;
		transform: translateX(-100px);
	}
}

cara membuat animasi-background-dengan-css-edi-170420 cara membuat animasi background-dengan-css-edi-170420

Baiklah jika sudah simpan file html dan css lalu buka pada browser masing-masing, kemudian lihat hasilnya seperti tampilan dibawah ini:

cara membuat animasi background dengan-css-edi-170420

Demikian pembahasan dari kami kursus privat css online kali ini tentang Cara Membuat Animasi Background Dengan CSS. Semoga bermanfaat dan sampai jumpa.

terima kasih.