Cara Membuat Animasi Text HTML Dengan Animate CSS

  Bartes Dwiky
  2020-05-14 19:59:31 WIB
 Online : 1

Oke agan agan, kali ini saya akan membagikan tutorial cara membuat animasi text di halaman website kita yang berbasis HTML atau sebagai.

Nah jadi animasi ini kita bisa dengan mudah membuat animasinya karna sudah siap pakai ya, tinggal pilih type animasinya.

 

Oke jadi yang harus kalian lakukan pertama adalah Download dulu css animasinya di sini

Animate [ Download ]

 

Selanjutnya kalian pindahkan ke folder project kalian, contohnya folder project saya bernama animasi.

Di dalam folder animasi kalian masukan saja file animate.css dan buat lah file bernama index.html.

 

Di file index html kalian masukan codingan seperti ini :

 

INDEX.HTML


<head>

<title>Buat animasi - Hellcat ID</title>

<link rel="stylesheet" type="text/css" href="animate.css">

</head>

<body>

<h1 class="animated flash infinite">Ini text animasi</h1>

</body>


Kita lihat tulisan tebal di atas yang bernama flash, itu adalah nama animasi yang kita settingkan pada text. 

Nah bagian infinite itu adalah untuk memperulang animasi agar tidak berhenti animasinya ( tidak di pakai juga gpp ).

 

Untuk kumpulan nama animasi textnya kalian bisa comot dibawah ini :

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flip = flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • slideInUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideOutUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • hinge
  • rollIn
  • rollOut

 

Nah itu lah beberapa macam gaya animasi yang bisa kalian gunakan. 

Oke Mungkin postingan kali ini sampai sini dulu, dan tunggu postingan terbaru dari website artikel ini. 

Youtube New Post