Notifications
General
Advertisement
Advertisement

Kumpulan animasi CSS Bergerak di blogger

Bloggermuda.com
Bloggermuda.com
March 13, 2025

Hello sobat Bloggermuda kali ini admin akan memberikan informasi mengenai kumpulan Animasi CSS di Blogger bisa bergerak dan juga keren

Fungsi animasi CSS

Fungsi animasi CSS beraneka macam diantaranya adalah untuk membuat preloder blog ataupun hanya menampilkan animasi tersebut karena animasi CSS tersebut keren, Animasi CSS adalah teknik yang memungkinkan elemen web untuk bergerak atau berubah secara visual dengan cara yang halus dan menarik. Fungsi ini memberikan kehidupan pada halaman dengan efek transisi yang menawan, seperti pergeseran, rotasi, dan perubahan warna. Dengan menggunakan properti seperti @keyframes, animation, dan transition, desainer web dapat menciptakan pengalaman yang interaktif dan dinamis, meningkatkan daya tarik visual serta keterlibatan pengguna. Animasi CSS tidak hanya memperindah tampilan, tetapi juga membantu dalam menyampaikan informasi dan merekomendasikan tindakan tanpa mencolokkan elemen sehingga memberikan nuansa yang lebih professional pada website

Kumpulan Animasi CSS

Baiklah berikut ini adalah kumpulan animasi CSS di blogger yang admin jabarkan secara lengkap, mulai dari contoh tampilan, cara pembuatan dan kamu juga bisa mengembangkan animasi CSS tersebut jika di mungkinkan

1. Animation Slime

Animasi slime merupakan sebuah animation yang dibuat menggunakan kode CSS dan juga HTML, nah apbila ditampilkan maka animasi tersebut akan bergerak gerak secara perlahan seakan akan hidup, dan 100% responsif

Contoh Tampilan

Tidak lupa juga admin sering sering memberikan contoh tampilan secara realtime kepada pembaca, nah berikut ini adalah contoh tampilan dari animation slimenya

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian kamu bisa meletakkannya diatas kode ]]></b:skin>

.wrapperrahrah{
  text-align:center;
}
svg.rahrah{
  margin: 0 auto;
  width:67%;
  height:auto;
}

Info: Atau kamu bisa meletakkan kode CSS diatas menggukan tag kode <style>

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode html dibawah ini, kemudian kamu bisa menggunakan kode HTML tersebut sesuai keinginan kamu aja ya

<div class="wrapperrahrah">
<svg  class="rahrah" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 288 288">
<linearGradient id="PSgrad_0" x1="70.711%" x2="0%" y1="70.711%" y2="0%">
  <stop offset="0%" stop-color="rgb(248, 0, 0)" stop-opacity="1" />
  <stop offset="100%" stop-color="rgb(247,109,138)" stop-opacity="1" />
</linearGradient>
<path fill="url(#PSgrad_0)"><animate  repeatCount="indefinite" attributeName="d" dur="5s"values="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z;M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8C48.9,198.6,57.8,191,51,171.3z;M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z"/>
</path>
</svg>
</div>

Info: Fungsi dari kode HTML diatas adalah untuk menampilkan funsgi dari tampilan animation CSS slime tersebut

2. Animasi Spinner

Animasi spinner adalah elemen visual dinamis yang digunakan untuk menunjukkan bahwa sebuah proses sedang berlangsung, seperti memuat data atau memproses informasi. Dengan berbagai bentuk, warna, dan efek rotasi, spinner tidak hanya berfungsi sebagai indikator loading, tetapi juga memberikan sentuhan estetika pada antarmuka pengguna. Desain yang kreatif dan responsif membuat spinner menarik untuk dilihat, menjaga perhatian pengguna dan mengurangi rasa frustrasi saat menunggu. menggunakan teknologi seperti CSS, animasi spinner menjadi solusi fungsional yang sekaligus mempercantik pengalaman pengguna di situs web.

Contoh Tampilan

Untuk memperlengkap artikel kali ini admin bakalan memberikan contoh demo atau contoh tampilan dari animasi CSS tersebut, berikut ini adalah contoh tampilannya

Info: Bagaiamana sobat keren bukan contoh Tampilannya

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diatas kode ]]>>b:skin>

.spinnerByRah{list-style:none;margin:0 auto;text-align:center;padding:0}
.loaderByRah{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #f80000;top:50%;animation:loaderByRah 2s infinite ease}
.loader-innerByRah{vertical-align:top;display:inline-block;width:100%;background-color:#f80000;animation:loader-innerByRah 2s infinite ease-in}
@keyframes loaderByRah{0%{transform:rotate(0deg)}
25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}
76%{transform:rotate(350deg)}100%{transform:rotate(350deg)}}
@keyframes loader-innerByRah{0%{height:0%}
25%{height:0%}50%{height:100%}76%{height:100%}100%{height:0%}}

Info: Atau kamu bisa juga menggunakannya di dalam artikel blog yaitu dengan menggunakan tag kode <style>

Kode HTML

Langkah selanjutnya untuk menampilkan animasi CSS tersebut, kamu bisa menyalin kode HTML dibawah ini, dan kemudian kamu bisa meletakkannya sesuai keinginan kamu aja

<div class='spinnerByRah'>
<span class='loaderByRah'>
<span class='loader-innerByRah'>
</span>
</span>
</div>

Info: Nah sobat kamu bisa menampilkan animasi CSS tersebut dimana pun asalkan masih didalam body blog

3. Animasi Volume

Animasi CSS volume adalah sebuah teknik pengkodean yang memanfaatkan Cascading Style Sheets (CSS) untuk menciptakan efek visual menawan dalam pengaturan audio. Dengan menggunakan transformasi dan transisi, elemen volume dapat diubah menjadi ikon dinamis yang memberikan visualisasi tingkat suara secara real-time. Misalnya, saat pengguna menyesuaikan level volume, elemen tersebut dapat bergetar, membesar, atau berubah warna, menciptakan pengalaman interaktif yang lebih hidup. Desain minimalis dan efek halus yang dihasilkan oleh animasi CSS tidak hanya mempercantik antarmuka pengguna, tetapi juga meningkatkan keterlibatan dan intuitivitas, menjadikan kontrol audio lebih menyenangkan dan responsif dalam aplikasi web atau proyek multimedia.

Contoh Tampilan

Sebagai pelengkapnya admin bakalan memberikan contoh tampilan atau contoh demo dari animasi Volume tersebut, nah berikut ini adalah contoh Tampilannya

Kode CSS

Seperti biasanya yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diata kode <style>

.spinByRah{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px}
.spinByRah > div{background-color:#f80000;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}
.spinByRah .object2ByRah{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.spinByRah .object3ByRah{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}
.spinByRah .object4ByRah{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}
.spinByRah .object5ByRah{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}
@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}
@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
</style>

Info: Kamu juga bisa menggunakan kode atau tag <style> untuk meletakkan kode CSS diatas

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin dan menggunakan kode HTML dibawah ini, kemudian kamu bisa meletakkannya sesuai keinginan kamu aja

<div class='spinByRah'>
      <div class='object1ByRah'></div>
      <div class='object2ByRah'></div>
      <div class='object3ByRah'></div>
      <div class='object4ByRah'></div>
      <div class='object5ByRah'></div>
    </div>

Info: Karena kode html diatas berfungsi untuk menampilkan animasi nya

4. Animasi Touch

Animasi CSS touch adalah efek interaktif yang merespons sentuhan pengguna, menambahkan dimensi dinamis pada elemen antarmuka. Ketika pengguna menyentuh atau mengklik objek, animasi ini memicu pergerakan halus seperti perubahan skala, rotasi, atau perpindahan posisi, menciptakan pengalaman yang lebih hidup dan menarik. Dengan menggunakan properti seperti transform, transition, dan hover, animasi ini bukan hanya berfungsi untuk menarik perhatian, tetapi juga memberikan umpan balik visual yang jelas, membuat pengguna merasa lebih terlibat dan terhubung dengan elemen yang mereka interaksi. Efek sentuhan ini dapat diterapkan pada tombol, gambar, atau konten interaktif lainnya, menjadikannya alat penting dalam merancang antarmuka yang responsif dan intuitif.

Contoh Tampilan

Jika kamu penasaran bagaimana pergerakan animasi saat disentuh kamu bisa melihat contoh tampilan yang sudah admin sediakan dibawah ini

Sentuh agar gerak
Auto Gerak

Info: Bagaimana sobat dengan contoh tampilannya keren bukan

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian kamu bisa tempelkan diatas kode ]]></b:skin>

.rahtouchme, .touchmerah{
    		margin:20px auto;
			  width:100px;
			  height:100px;
		}
.rahtouchme{
			background: #f80000;
			color:white;
			text-align: center;
			padding:10px;
		}
		.rahtouchme:hover{
		  cursor:pointer;
		  animation-name:rotate;
		  animation-duration:1s;
		 animation-iteration-count: infinite;
		}
		@keyframes rotate{
		  from{
		    transfrom:rotate(0deg);
		  }
		  to{
		    transform:rotate(350deg);
		  }
		}
		.touchmerah{
			background:#2980B9;
			animation-name:rotate;
		    animation-duration:2s;
		    animation-iteration-count: infinite;
}

InfoSobat juga bisa menggunakan Tag kode <style> untuk meletakkan kode CSS diatas

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML dibawah ini, kemudian kamu bisa menggunakan kode HTML tersebut sesuai keperluan kamu aja okay

<div class="rahtouchme">
Sentuh
</div>
	<div class="touchmerah">
</div>

Info: Fungsi dari kode HTML diatas adalah untuk menampilkan Animasi bergerak ketika disentuh tersebut

5. Animation WaterBob

WaterBob merupakan nama dari tampilan animasi CSS, yang mana Animasi CSS tersebut bisa digunakan pada seluruh jenis platform yang mendukung CSS dan HTML, seperti blogger dan sejenisnya okay

Contoh Tampilan

Admin telah menyediakan contoh tampilan dari animasi CSS WaterBob tersebut, dibawah ini adalah contoh tampilanya

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkan kode CSS tersebut tepat diatas kode ]]></b:skin>

.rahObs {
   width: 280px;
   height: 280px;
   margin: 0 auto;
   border-radius: 100%;
   -webkit-animation: rahbelok linear 16s infinite;
   -moz-animation: rahbelok linear 16s infinite;
   &:after {
     content: '';
     height: 10px;
     width: 10px;
     border-radius: 50%;
     background: #334455;
     position: relative;
     display: block;
   }
  &:before {
     content: '';
     height: 10px;
     width: 10px;
     border-radius: 50%;
     background: #f80000;
     position: absolute;
      margin-top: -60px;
     display: block;
      -webkit-animation: rahOrbit linear 5s infinite;
     -moz-animation: rahOrbit linear 5s infinite;
     animation: rahOrbit linear 5s infinite;
   }
 }
 .rahObo {
   position: absolute;
   background: #f80000;
 }
 .rahObo:nth-child(1) {
   top: -10px;
   left: -10px;
   width: 250px;
   height: 260px;
   background: #f80000;
   border-radius: 100%;
   -webkit-animation: rahcoolweh linear 3s infinite;
   -moz-animation: rahcoolweh linear 3s infinite;
   animation: rahcoolweh linear 3s infinite;
 }
 .rahObo:nth-child(2) {
   top: 10px;
   left: 10px;
   background: #f80000;
   width: 250px;
   height: 260px;
   border-radius: 100%;
   -webkit-animation: rahleftweh linear 3s infinite;
   -moz-animation: rahleftweh linear 3s infinite;
   animation: rahleftweh linear 3s infinite;
 }
 .rahObo:nth-child(3) {
   top: 10px;
   left: -10px;
   background: #f80000;
   width: 250px;
   height: 260px;
   border-radius: 100%;
   -webkit-animation: rahrightweh linear 3s infinite;
   -moz-animation: rahrightweh linear 3s infinite;
   animation: rahrightweh linear 3s infinite;
 }
@keyframes rahOrbit {
    0% {
     top: 10px;
      opacity: 1;
     transform: rotate(0deg) scale(1);
   }
     50% {
   box-shadow: 0 0 5px rgba(81, 203, 238, 1);
     top: -10px;
       opacity: 0.3;
     transform: rotate(180deg) scale(1.5);
   }
   100% {
    top: 10px;
       opacity: 1;
     transform: rotate(350deg) scale(1);
   }
}
 @keyframes rahcoolweh {
   0% {
     top: 0px;
     transform: rotate(0deg) scale(1);
   }
   50% {
     top: 10px;
     transform: rotate(180deg) scale(1.04);
   }
   100% {
     top: 0px;
     transform: rotate(350deg) scale(1);
   }
 }
 @keyframes rahleftweh {
   0% {
     top: 0px;
     transform: rotate(0deg) scale(1.05);
   }
   50% {
     top: 10px;
     transform: rotate(180deg) scale(1);
   }
   100% {
     top: 0px;
     transform: rotate(350deg) scale(1.05);
   }
 }
 @keyframes rahrightweh {
   0% {
     top: -10px;
     transform: rotate(0deg) scale(1);
   }
   50% {
     top: 0px;
     transform: rotate(180deg) scale(1.02);
   }
   100% {
     top: -10px;
     transform: rotate(350deg) scale();
   }
 }
 @-webkit-keyframes rahbelok {
   0% {
     -webkit-transform: rotate(0deg) skewX(0deg);
   }
   100% {
     -webkit-transform: rotate(-350deg) skewX(0deg);
   }
 }

Info: Atau kamu juga bisa menggunakan tag kode <style>

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML dibawah ini kemudian gunakan sesuai keperluan kamu aja okay

<div class="rahObs">
  <div class="rahObo"></div>
  <div class="rahObo"></div>
  <div class="rahObo"></div>
</div>

Info: Fungsi dari kode html diatas adalah untuk menampilkan fungsi animation CSS tersebut

Related Posts
Bloggermuda.com
Bloggermuda.com
Belajar dan menghasilkan adalah kegemaran saya, salam cuan
Related Posts
Post a Comment
Cancel
Advertisement
Scroll to top