Cara Membuat Animasi Text dengan HTML dan CSS

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Animasi Text dengan HTML dan CSS. sebelumnya pada sebuah website itu banyak sekali sebuah text atau kalimat tetapi text tersebut sangat membosankan atau tidak ada animasi sedikitpun.

Jadi disini saya akan memberikan contoh tentang Cara Membuat Animasi Text dengan HTML dan CSS. agar text yang ada pada website kita terlihat lebih keren dan tidak membosankan.

oke langsung saja kita mulai

Pertama buat file htmlnya terlebih dahulu, lalu copy script html dibawah ini :

<section class="container">
  <h1 class="title">
    <span>Hallo</span>
    <span>DumetSchool</span>
  </h1>
  
  <h2 class="title">
    <span>Terbaik dan Nomor 1</span>
  </h2>
</section>

setelah sudah dengan htmlnya, sekarang 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>

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

maka hasilnya akan terlihat seperti pada gambar dibawah ini :

jika hasilnya sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Cara Membuat Animasi Text dengan HTML dan CSS.

sekian pembahasan kali ini tentang Cara Membuat Animasi Text dengan HTML dan CSS. semoga dapat banyak referensi mengenai animasi design website, sampai bertemu di pembahasan selanjutnya.

Terimakasih.

Cara Membuat Animasi Text dengan HTML dan CSS

Kategori