Cara Membuat Animasi Text dengan HTML dan CSS

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti lazimnya ya teman-teman, semoga masih diberikan medis dan kebahagiaan agar dapat kembali semangat pada mencari informasi atau ingin mengupgrade skill didunia blog terutama pada hal desain blog.

Di kesempatan kali ini saya akan membahas mengenai Cara Merancang Animasi Text dengan HTML dan CSS. sebelumnya di sebuah blog itu banyak sekali sebuah text atau kalimat tetapi text tersebut benar-benar membosankan atau tak ada animasi sedikitpun.

Jadi disini saya akan memberikan contoh mengenai Cara Merancang Animasi Text dengan HTML dan CSS. agar text yang terdapat di blog kita terlihat lebih keren dan tak membosankan.

oke seketika saja kita mulai

Pertama-tama bikin file htmlnya terlebih dahulu, lalu copy script html dibawah ini :

<section class=container>
  <h1 class=title>
    <span>Hallo</span>
    <span>Source Code Aplikasi</span>
  </h1>
  
  <h2 class=title>
    <span>Terbaik dan Nomor 1</span>
  </h2>
</section>

setelah telah dengan htmlnya, kini masukan script cssnya seperti dibawah ini :

<style>
@import https://fonts.googleapis.com/css?family=Baloo+Paaji;
html, body {
  height: 100%;
}

body {
  font-family: 'Baloo Paaji', cursive;
  background: #1e90ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 400px;
  height: 220px;
  position: relative;
}

h1, h2 {
  font-size: 75px;
  text-transform: uppercase;
}
h1 span, h2 span {
  width: 100%;
  float: left;
  color: #ffffff;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 0;
  animation-name: titleAnimation;
  animation-timing-function: ease;
  animation-duration: 3s;
}

h1 span {
  animation-delay: 0.6s;
  -webkit-animation-fill-mode: forwards;
}
h1 span:first-child {
  animation-delay: 0.7s;
}
h1 span:last-child {
  color: #ffe221;
  animation-delay: 0.5s;
}

h2 {
  top: 0;
  position: absolute;
}
h2 span {
  animation-delay: 4.1s;
  -webkit-animation-fill-mode: forwards;
}
h2 span:first-child {
  animation-delay: 4.2s;
}
h2 span:last-child {
  color: #ffe221;
  animation-delay: 4s;
}


@keyframes titleAnimation {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);
  }
  80% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% -30%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% -30%, 0 100%, 0 100%);
  }
}

</style>

sekiranya telah dengan style css nya, coba teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan.

karenanya hasilnya akan terlihat seperti di gambar dibawah ini :

sekiranya hasilnya telah seperti di gambar diatas karenanya teman-teman telah berhasil pada Cara Merancang Animasi Text dengan HTML dan CSS.

demikianlah pembahasan kali ini mengenai Cara Merancang Animasi Text dengan HTML dan CSS. semoga dapat banyak referensi mengenai animasi design blog, hingga bertemu di pembahasan berikutnya.

Terimakasih.

Sumber https://kursuswebsite.org