Cara Membuat Animation CSS | Dengan Mudah

Save Koding
July 25, 2023
0

Animation pada website memiliki berbagai kegunaan yang dapat meningkatkan pengalaman pengguna dan membuat tampilan website lebih menarik. Dengan menggunakan HTML dan CSS, kita dapat membuat animasi yang dinamis dan interaktif.

Salah satu kegunaan dari animasi pada website adalah untuk menarik perhatian pengunjung. Animasi yang halus dan menarik dapat membuat pengunjung tertarik untuk menjelajahi lebih lanjut konten yang ada di dalam website.

Selain itu, animasi juga dapat digunakan untuk memberikan efek visual yang memperkuat pesan atau informasi yang ingin disampaikan. Misalnya, dengan menggunakan animasi pada tombol "Submit" saat diklik, kita bisa memberikan umpan balik visual kepada pengguna bahwa aksi mereka telah berhasil dilakukan.

Untuk membuat animasi dengan HTML dan CSS, langkah-langkahnya sebagai berikut:

1. Pertama-tama, tentukan elemen mana yang akan diberi animasi.

2. Gunakan CSS untuk mendefinisikan properti animasi seperti durasi, jenis easing (misalnya ease-in-out), atau jumlah putaran.

3. Buat aturan keyframe menggunakan @keyframes di dalam CSS untuk mengontrol perubahan properti elemen selama durasi animasi.

4. Terapkan kelas atau ID elemen tersebut di dalam HTML sesuai dengan aturan keyframe yang telah dibuat.

Pastikan juga untuk menguji hasilnya secara berkala agar sesuai dengan harapan Anda. Selain itu, jangan lupa mempertimbangkan kinerja website agar tidak terlalu membebani loading time dengan menggunakan terlalu banyak atau kompleksitas animasi.

Dengan menguasai teknik dasar HTML dan CSS serta memahami prinsip animasi, Anda dapat menciptakan animasi yang menarik dan interaktif untuk meningkatkan pengalaman pengguna di website.

Mari kita simak cara buat animasi css :

1 .File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule="" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>

    <title>Document</title>
</head>
<body>

  <div class="container">
    <div class="test-tube">
      
      <div class="line-top">
        <span class="line-top__line1"></span>
        <span class="line-top__line2"></span>
      </div>
      
      <div class="top"></div>
      
      <div class="liquid">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#a231ff" fill-opacity="1" d="M0,192L80,208C160,224,320,256,480,234.7C640,213,800,139,960,117.3C1120,96,1280,128,1360,144L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>
        <div class="liquid__bottom"></div>
      </div>
      
      <div class="tube"></div>
    </div>
    <a href="https://dribbble.com/myacode" class="dribbble" target="_blank"><ion-icon name="logo-dribbble"></ion-icon></a>
  </div>


  <script src="main.js"></script>

</body>
</html>


2. File style.css

:root {
  --primary: #a231ff;
  --primary-dark: #6a22d6;
  --grey-light: #f5f6fa;
  --grey: #645c6b;
  --white: #fff;
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font-size: 62.5%;
  overflow-y: scroll;
}
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--grey-light);
}
.test-tube {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.line-top {
  height: 0.6rem;
  width: 10rem;
  margin-bottom: -0.6rem;
  background: var(--grey);
  z-index: 500;
  position: relative;
}
.line-top::before, .line-top::after {
  content: '';
  position: absolute;
  height: 0.6rem;
  width: 1.4rem;
  background: var(--grey);
  top: 2.4rem;
  border-radius: 1rem;
}
.line-top::before {
  left: -0.4rem;
}
.line-top::after {
  left: 9rem;
}
.line-top__line1, .line-top__line2 {
  position: absolute;
  top: 12rem;
  left: 1.8rem;
  height: 10rem;
  width: 0.6rem;
  background: var(--white);
  opacity: 0.5;
  border-radius: 1rem;
}
.line-top__line2 {
  top: 10rem;
  height: 1.5rem;
}
.top {
  width: 14.2rem;
  height: 3rem;
  margin-bottom: -0.7rem;
  border-radius: 4rem;
  border: 0.6rem solid var(--grey);
  z-index: 100;
}
.liquid {
  width: 7.8rem;
  height: 20rem;
  margin-bottom: -24.7rem;
  margin-top: 4.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 300;
}
.liquid__bottom {
  height: 18rem;
  width: inherit;
  border-bottom-left-radius: 8rem;
  border-bottom-right-radius: 8rem;
  background: var(--primary);
  background: linear-gradient(360deg, var(--primary-dark) 0%, var(--primary) 100%);
}
.tube {
  width: 10.2rem;
  height: 25.8rem;
  border-bottom-left-radius: 8rem;
  border-bottom-right-radius: 8rem;
  border: 0.6rem solid var(--grey);
  border-top: 0.6rem solid var(--grey-light);
  z-index: 200;
}
.color:nth-child(1) {
  width: 7px;
  height: 7px;
  bottom: 52px;
  left: 35px;
  border-radius: 50%;
  position: absolute;
  animation: move-1 5s infinite;
  animation-delay: -0.2s;
  z-index: 400;
}
@keyframes move-1 {
  100% {
    transform: translateY(-6rem);
 }
}
.color:nth-child(2) {
  width: 7px;
  height: 7px;
  bottom: 67px;
  left: 50px;
  border-radius: 50%;
  position: absolute;
  animation: move-2 5s infinite;
  animation-delay: -0.4s;
  z-index: 400;
}
@keyframes move-2 {
  100% {
    transform: translateY(-28rem);
 }
}
.color:nth-child(3) {
  width: 7px;
  height: 7px;
  bottom: 23px;
  left: 17px;
  border-radius: 50%;
  position: absolute;
  animation: move-3 5s infinite;
  animation-delay: -0.6s;
  z-index: 400;
}
@keyframes move-3 {
  100% {
    transform: translateY(-3rem);
 }
}
.color:nth-child(4) {
  width: 10px;
  height: 10px;
  bottom: 67px;
  left: 38px;
  border-radius: 50%;
  position: absolute;
  animation: move-4 5s infinite;
  animation-delay: -0.8s;
  z-index: 400;
}
@keyframes move-4 {
  100% {
    transform: translateY(-1rem);
 }
}
.color:nth-child(5) {
  width: 10px;
  height: 10px;
  bottom: 54px;
  left: 16px;
  border-radius: 50%;
  position: absolute;
  animation: move-5 5s infinite;
  animation-delay: -1s;
  z-index: 400;
}
@keyframes move-5 {
  100% {
    transform: translateY(-2rem);
 }
}
.color:nth-child(6) {
  width: 11px;
  height: 11px;
  bottom: 37px;
  left: 37px;
  border-radius: 50%;
  position: absolute;
  animation: move-6 5s infinite;
  animation-delay: -1.2s;
  z-index: 400;
}
@keyframes move-6 {
  100% {
    transform: translateY(-13rem);
 }
}
.color:nth-child(7) {
  width: 8px;
  height: 8px;
  bottom: 29px;
  left: 53px;
  border-radius: 50%;
  position: absolute;
  animation: move-7 5s infinite;
  animation-delay: -1.4s;
  z-index: 400;
}
@keyframes move-7 {
  100% {
    transform: translateY(-25rem);
 }
}
.color:nth-child(8) {
  width: 8px;
  height: 8px;
  bottom: 18px;
  left: 41px;
  border-radius: 50%;
  position: absolute;
  animation: move-8 5s infinite;
  animation-delay: -1.6s;
  z-index: 400;
}
@keyframes move-8 {
  100% {
    transform: translateY(-11rem);
 }
}
.color:nth-child(9) {
  width: 10px;
  height: 10px;
  bottom: 65px;
  left: 23px;
  border-radius: 50%;
  position: absolute;
  animation: move-9 5s infinite;
  animation-delay: -1.8s;
  z-index: 400;
}
@keyframes move-9 {
  100% {
    transform: translateY(-4rem);
 }
}
.color:nth-child(10) {
  width: 10px;
  height: 10px;
  bottom: 51px;
  left: 16px;
  border-radius: 50%;
  position: absolute;
  animation: move-10 5s infinite;
  animation-delay: -2s;
  z-index: 400;
}
@keyframes move-10 {
  100% {
    transform: translateY(-10rem);
 }
}
.color:nth-child(11) {
  width: 10px;
  height: 10px;
  bottom: 70px;
  left: 55px;
  border-radius: 50%;
  position: absolute;
  animation: move-11 5s infinite;
  animation-delay: -2.2s;
  z-index: 400;
}
@keyframes move-11 {
  100% {
    transform: translateY(-8rem);
 }
}
.color:nth-child(12) {
  width: 11px;
  height: 11px;
  bottom: 35px;
  left: 54px;
  border-radius: 50%;
  position: absolute;
  animation: move-12 5s infinite;
  animation-delay: -2.4s;
  z-index: 400;
}
@keyframes move-12 {
  100% {
    transform: translateY(-10rem);
 }
}
.color:nth-child(13) {
  width: 8px;
  height: 8px;
  bottom: 40px;
  left: 21px;
  border-radius: 50%;
  position: absolute;
  animation: move-13 5s infinite;
  animation-delay: -2.6s;
  z-index: 400;
}
@keyframes move-13 {
  100% {
    transform: translateY(-5rem);
 }
}
.color:nth-child(14) {
  width: 8px;
  height: 8px;
  bottom: 66px;
  left: 29px;
  border-radius: 50%;
  position: absolute;
  animation: move-14 5s infinite;
  animation-delay: -2.8s;
  z-index: 400;
}
@keyframes move-14 {
  100% {
    transform: translateY(-5rem);
 }
}
.color:nth-child(15) {
  width: 10px;
  height: 10px;
  bottom: 36px;
  left: 20px;
  border-radius: 50%;
  position: absolute;
  animation: move-15 5s infinite;
  animation-delay: -3s;
  z-index: 400;
}
@keyframes move-15 {
  100% {
    transform: translateY(-22rem);
 }
}
.color:nth-child(16) {
  width: 11px;
  height: 11px;
  bottom: 68px;
  left: 30px;
  border-radius: 50%;
  position: absolute;
  animation: move-16 5s infinite;
  animation-delay: -3.2s;
  z-index: 400;
}
@keyframes move-16 {
  100% {
    transform: translateY(-26rem);
 }
}
.color:nth-child(17) {
  width: 9px;
  height: 9px;
  bottom: 62px;
  left: 21px;
  border-radius: 50%;
  position: absolute;
  animation: move-17 5s infinite;
  animation-delay: -3.4s;
  z-index: 400;
}
@keyframes move-17 {
  100% {
    transform: translateY(-4rem);
 }
}
.color:nth-child(18) {
  width: 7px;
  height: 7px;
  bottom: 43px;
  left: 14px;
  border-radius: 50%;
  position: absolute;
  animation: move-18 5s infinite;
  animation-delay: -3.6s;
  z-index: 400;
}
@keyframes move-18 {
  100% {
    transform: translateY(-14rem);
 }
}
.color:nth-child(19) {
  width: 7px;
  height: 7px;
  bottom: 69px;
  left: 11px;
  border-radius: 50%;
  position: absolute;
  animation: move-19 5s infinite;
  animation-delay: -3.8s;
  z-index: 400;
}
@keyframes move-19 {
  100% {
    transform: translateY(-13rem);
 }
}
.color:nth-child(20) {
  width: 9px;
  height: 9px;
  bottom: 65px;
  left: 40px;
  border-radius: 50%;
  position: absolute;
  animation: move-20 5s infinite;
  animation-delay: -4s;
  z-index: 400;
}
@keyframes move-20 {
  100% {
    transform: translateY(-8rem);
 }
}
.color:nth-child(21) {
  width: 8px;
  height: 8px;
  bottom: 65px;
  left: 33px;
  border-radius: 50%;
  position: absolute;
  animation: move-21 5s infinite;
  animation-delay: -4.2s;
  z-index: 400;
}
@keyframes move-21 {
  100% {
    transform: translateY(-2rem);
 }
}
.color:nth-child(22) {
  width: 7px;
  height: 7px;
  bottom: 70px;
  left: 19px;
  border-radius: 50%;
  position: absolute;
  animation: move-22 5s infinite;
  animation-delay: -4.4s;
  z-index: 400;
}
@keyframes move-22 {
  100% {
    transform: translateY(-17rem);
 }
}
.color:nth-child(23) {
  width: 8px;
  height: 8px;
  bottom: 67px;
  left: 27px;
  border-radius: 50%;
  position: absolute;
  animation: move-23 5s infinite;
  animation-delay: -4.6s;
  z-index: 400;
}
@keyframes move-23 {
  100% {
    transform: translateY(-13rem);
 }
}
.color:nth-child(24) {
  width: 7px;
  height: 7px;
  bottom: 56px;
  left: 50px;
  border-radius: 50%;
  position: absolute;
  animation: move-24 5s infinite;
  animation-delay: -4.8s;
  z-index: 400;
}
@keyframes move-24 {
  100% {
    transform: translateY(-1rem);
 }
}
.color:nth-child(25) {
  width: 12px;
  height: 12px;
  bottom: 32px;
  left: 30px;
  border-radius: 50%;
  position: absolute;
  animation: move-25 5s infinite;
  animation-delay: -5s;
  z-index: 400;
}
@keyframes move-25 {
  100% {
    transform: translateY(-14rem);
 }
}
.color:nth-child(26) {
  width: 10px;
  height: 10px;
  bottom: 42px;
  left: 48px;
  border-radius: 50%;
  position: absolute;
  animation: move-26 5s infinite;
  animation-delay: -5.2s;
  z-index: 400;
}
@keyframes move-26 {
  100% {
    transform: translateY(-21rem);
 }
}
.color:nth-child(27) {
  width: 12px;
  height: 12px;
  bottom: 11px;
  left: 27px;
  border-radius: 50%;
  position: absolute;
  animation: move-27 5s infinite;
  animation-delay: -5.4s;
  z-index: 400;
}
@keyframes move-27 {
  100% {
    transform: translateY(-28rem);
 }
}
.color:nth-child(28) {
  width: 8px;
  height: 8px;
  bottom: 19px;
  left: 51px;
  border-radius: 50%;
  position: absolute;
  animation: move-28 5s infinite;
  animation-delay: -5.6s;
  z-index: 400;
}
@keyframes move-28 {
  100% {
    transform: translateY(-21rem);
 }
}
.color:nth-child(29) {
  width: 10px;
  height: 10px;
  bottom: 28px;
  left: 15px;
  border-radius: 50%;
  position: absolute;
  animation: move-29 5s infinite;
  animation-delay: -5.8s;
  z-index: 400;
}
@keyframes move-29 {
  100% {
    transform: translateY(-19rem);
 }
}
.color:nth-child(30) {
  width: 12px;
  height: 12px;
  bottom: 49px;
  left: 25px;
  border-radius: 50%;
  position: absolute;
  animation: move-30 5s infinite;
  animation-delay: -6s;
  z-index: 400;
}
@keyframes move-30 {
  100% {
    transform: translateY(-6rem);
 }
}
ion-icon {
  position: fixed;
  font-size: 36px;
  right: 20px;
  bottom: 20px;
  color: #ea4c89;
}


3.File main.js

const container = document.querySelector('.liquid');

function hslColors () {
  let colors = [];
  let hue = Math.floor(Math.random() * (320 - 153) + 153);
  let saturation = Math.floor(Math.random() * (100 - 90) + 90);
  let lightness = Math.floor(Math.random() * (80 - 70) + 70);
  
  colors.push(`hsl(${hue},${saturation}%, ${lightness}%)`);
  return colors;
};


function colors() {
  let template = `
  <div class="color" style="background: ${hslColors()};">       </div>
  `;
  
  container.insertAdjacentHTML('beforeend', template);
};

for(i = 0; i < 30; i++) {
  colors();
};

Sumber source code klik codepen



Versi Video Tutorial


Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link