15.1.15
35

10 Gaya Efek CSS Animasi Pada Teks

Yang perlu Anda lakukan disini adalah bagaimana merangkai bentuk elemen CSS untuk membuat objek bergerak dengan efek-animasi berdasarkan konsep deklerasi struktur seperti menata letak:
  • infinite (gerak tidak terbatas),
  • delay (penundaan),
  • ease-in (pergerakan kedalam secara perlahan),
  • duration (lama waktu gerak),
  • dan masih banyak lagi...
Agar dengan mudah kita membentuk gaya efeknya dengan perintah @keyframes media. Namun sebelumnya, ada baiknya Anda mengenal Inilah Beberapa Nama Efek Serta Cara Kerjanya terlebih dahulu, setelahnya Anda tinggal pilih salah satu dari 10 Gaya Efek CSS Animasi Pada Teks berikut:




DEMO SHOW



<style type='text/css'>
.sentence{color: #fff;font-size: 30px;text-align: left}
.wrapper{font-family: sans-serif;margin: 0 auto;position: relative}

/*1. Vertical Sliding*/
.slidingVertical{display: inline;text-indent: 8px;}
.slidingVertical span{
  animation: topToBottom 12.5s linear infinite 0s;
  -moz-animation: topToBottom 12.5s linear infinite 0s;
  -webkit-animation: topToBottom 12.5s linear infinite 0s;
  color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.slidingVertical span:nth-child(2) {
  animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s}

.slidingVertical span:nth-child(3) {
  animation-delay: 5s;
  -moz-animation-delay: 5s;
  -webkit-animation-delay: 5s}

.slidingVertical span:nth-child(4) {
  animation-delay: 7.5s;
  -moz-animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s}

.slidingVertical span:nth-child(5) {
  animation-delay: 10s;
  -moz-animation-delay: 10s;
  -webkit-animation-delay: 10s}

@keyframes topToBottom {
 0% {opacity: 0;}
 5% {opacity: 0;transform: translateY(-50px)}
 10% {opacity: 1;transform: translateY(0px)}
 25% {opacity: 1;transform: translateY(0px)}
 30% {opacity: 0;transform: translateY(50px)}
 80% {opacity: 0}
 100% {opacity: 0}}

/*2. Horizontal Sliding*/
.slidingHorizontal {display: inline;text-indent: 8px;}
.slidingHorizontal span {
  animation: leftToRight 12.5s linear infinite 0s;
  -moz-animation: leftToRight 12.5s linear infinite 0s;
  -webkit-animation: leftToRight 12.5s linear infinite 0s;
  color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.slidingHorizontal span:nth-child(2) {animation-delay: 2.5s}
.slidingHorizontal span:nth-child(3) {animation-delay: 5s}
.slidingHorizontal span:nth-child(4) {animation-delay: 7.5s}
.slidingHorizontal span:nth-child(5) {animation-delay: 10s}

@keyframes leftToRight {
 0% {opacity: 0;}
 5% {opacity: 0; transform: translateX(-50px);}
 10% {opacity: 1; transform: translateX(0px);}
 25% {opacity: 1; transform: translateX(0px);}
 30% {opacity: 0; transform: translateX(50px);}
 80% {opacity: 0;}
 100% {opacity: 0;}}

/*3. FadeIn*/
.fadeIn{display: inline;text-indent: 8px}
.fadeIn span{
 animation: fadeEffect 12.5s linear infinite 0s;
 -moz-animation: fadeEffect 12.5s linear infinite 0s;
 -webkit-animation: fadeEffect 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.fadeIn span:nth-child(2) {animation-delay: 2.5s}
.fadeIn span:nth-child(3) {animation-delay: 5s}
.fadeIn span:nth-child(4) {animation-delay: 7.5s}
.fadeIn span:nth-child(5) {animation-delay: 10s}

@keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; transform: translateY(0px); }
 10% { opacity: 1; transform: translateY(0px); }
 25% { opacity: 1; transform: translateY(0px); }
 30% { opacity: 0; transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0 }}

/*4. Vertical Flip*/
.verticalFlip{display: inline;text-indent: 8px}
.verticalFlip span{
 animation: vertical 12.5s linear infinite 0s;
 -moz-animation: vertical 12.5s linear infinite 0s;
 -webkit-animation: vertical 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.verticalFlip span:nth-child(2) {animation-delay: 2.5s}
.verticalFlip span:nth-child(3) {animation-delay: 5s}
.verticalFlip span:nth-child(4) {animation-delay: 7.5s}
.verticalFlip span:nth-child(5) {animation-delay: 10s}

@-moz-keyframes vertical{
 0% { opacity: 0; }
 5% { opacity: 0; transform: rotateX(180deg); }
 10% { opacity: 1; transform: translateY(0px); }
 25% { opacity: 1; transform: translateY(0px); }
 30% { opacity: 0; transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0}}

/*5. Horizontal Flip*/
.horizontalFlip {display: inline;text-indent: 8px}
.horizontalFlip span {
 animation: horizontal 12.5s linear infinite 0s;
 -moz-animation: horizontal 12.5s linear infinite 0s;
 -webkit-animation: horizontal 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.horizontalFlip span:nth-child(2) {animation-delay: 2.5s}
.horizontalFlip span:nth-child(3) {animation-delay: 5s}
.horizontalFlip span:nth-child(4) {animation-delay: 7.5s}
.horizontalFlip span:nth-child(5) {animation-delay: 10s}

@keyframes horizontal{
 0% { opacity: 0; }
 5% { opacity: 0; transform: rotateY(180deg); }
 10% { opacity: 1; transform: translateX(0px); }
 25% { opacity: 1; transform: translateX(0px); }
 30% { opacity: 0; transform: translateX(0px); }
 80% { opacity: 0; }
 100% { opacity: 0}}

/*6. AntiClockWise Effect*/
.antiClock{display: inline;text-indent: 8px}
.antiClock span{
 animation: anti 12.5s linear infinite 0s;
 -moz-animation: anti 12.5s linear infinite 0s;
 -webkit-animation: anti 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.antiClock span:nth-child(2) {animation-delay: 2.5s}
.antiClock span:nth-child(3) {animation-delay: 5s}
.antiClock span:nth-child(4) {animation-delay: 7.5s}
.antiClock span:nth-child(5) {animation-delay: 10s}

@keyframes anti{
 0% { opacity: 0; }
 5% { opacity: 0; transform: rotateX(180deg); }
 10% { opacity: 1; transform: translateY(0px); }
 25% { opacity: 1; transform: translateY(0px); }
 30% { opacity: 0; transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0}}

/*7. ClockWise Effect*/
.clockWise{display: inline;text-indent: 8px}
.clockWise span{
 animation: clock 12.5s linear infinite 0s;
 -moz-animation: clock 12.5s linear infinite 0s;
 -webkit-animation: clock 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.clockWise span:nth-child(2) {animation-delay: 2.5s}
.clockWise span:nth-child(3) {animation-delay: 5s}
.clockWise span:nth-child(4) {animation-delay: 7.5s}
.clockWise span:nth-child(5) {animation-delay: 10s}

@keyframes clock{
 0% { opacity: 0; }
 5% { opacity: 0; transform: rotate(-180deg); }
 10% { opacity: 1; transform: translateX(0px); }
 25% { opacity: 1; transform: translateX(0px); }
 30% { opacity: 0; transform: translateX(0px); }
 80% { opacity: 0; }
 100% { opacity: 0}}

/*8. Pop Effect*/
.popEffect{display: inline;text-indent: 8px}
.popEffect span{
 animation: pop 12.5s linear infinite 0s;
 -moz-animation: pop 12.5s linear infinite 0s;
 -webkit-animation: pop 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.popEffect span:nth-child(2) {animation-delay: 2.5s}
.popEffect span:nth-child(3) {animation-delay: 5s}
.popEffect span:nth-child(4) {animation-delay: 7.5s}
.popEffect span:nth-child(5) {animation-delay: 10s}

@keyframes pop{
 0% { opacity: 0; }
 5% { opacity: 0; transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
 10% { opacity: 1; transform: translateY(0px); }
 25% { opacity: 1; transform: translateY(0px); }
 30% { opacity: 0; transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0;}}

/*9. Push Effect*/
.pushEffect {display: inline;text-indent: 8px}
.pushEffect span{
 animation: push 12.5s linear infinite 0s;
 -moz-animation: push 12.5s linear infinite 0s;
 -webkit-animation: push 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.pushEffect span:nth-child(2) {animation-delay: 2.5s}
.pushEffect span:nth-child(3) {animation-delay: 5s}
.pushEffect span:nth-child(4) {animation-delay: 7.5s}
.pushEffect span:nth-child(5) {animation-delay: 10s}

@keyframes push{
  0% {opacity: 0}
  5% {opacity: 0; transform: rotate(0deg) scale(2) skew(0deg) translate(0px)}
  10% {opacity: 1; transform: translateX(0px)}
  25% {opacity: 1; transform: translateX(0px)}
  30% {opacity: 0; transform: translateX(0px)}
  80% {opacity: 0}
  100% {opacity: 0}}

/*10. Falling Effect*/
.falling{display: inline;text-indent: 8px;}
.falling span{
  position: absolute;opacity: 0;overflow: hidden;color: #FC6;
  -webkit-transform-origin: 5% 75%;
  -moz-transform-origin: 5% 75%;
  transform-origin: 5% 75%;
  -webkit-animation: rotateWord 12.5s linear infinite 0s;
  -moz-animation: rotateWord 12.5s linear infinite 0s;
  animation: rotateWord 12.5s linear infinite 0s}

.falling span:nth-child(2) {animation-delay: 2.5s}
.falling span:nth-child(3) {animation-delay: 5s}
.falling span:nth-child(4) {animation-delay: 7.5s}
.falling span:nth-child(5) {animation-delay: 10s}

@keyframes rotateWord {
  0% {opacity: 0}
  5% {opacity: 1}
  17% {opacity: 1; transform: rotate(0deg)}
  19% {opacity: 1; transform: rotate(98deg)}
  21% {opacity: 1; transform: rotate(86deg)}
  23% {opacity: 1; transform: translateY(85px) rotate(83deg)}
  25% {opacity: 0; transform: translateY(170px) rotate(80deg)}
  80% {opacity: 0;}
  100%{opacity: 0}}
</style>


<div class="wrapper">
   <div class="sentence"> //Vertical Sliding Effect...
      Teks Anda Disini...<div class="slidingVertical">
          <span>Amazing</span>
          <span>Beautiful</span>
          <span>Cute</span>
          <span>Delightful</span>
          <span>Emotional</span>
      </div>
   </div>

   <div class="sentence"> //Slidding Horizontal Effect...
      Teks Anda Disini...<div class="slidingHorizontal">
          <span>Teks 1...</span>
          <span>Teks 2...</span>
          <span>Teks 3...</span>
          <span>Teks 4...</span>
          <span>Teks 5...</span>
      </div>
   </div>

   <div class="sentence"> //Fade In Effect...
<!..dan seterusnya..!>
// perhatikan elemen CSS, efek apa yang akan Anda gunakan.
// lalu panggil nama efeknya dengan atibut class="effect-name"
...
</div><!..ending wrapper..!>


Bagaimana dengan 10 Gaya Efek CSS Animasi Pada Teks diatas.?, sudah menemukan pilihan efek yang cocok untuk mempercantik tampilan blog Anda..!!?

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 10 Gaya Efek CSS Animasi Pada Teks
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

35 komentar

  1. satu saja ga mudeng kogk mbak, ini malah ngasih sepuluh :) (c)

    BalasHapus
    Balasan
    1. belum ada mbak devy cz diriku pakai wp ciiinnn (c)

      Hapus
    2. kalau gak ada pilihan berarti pilih nomor 11 ya kang, memilih menyerah, hehe..!!,
      padahal pada efek ke- 8 nama kang jum devy sertakan tuh..
      hmmm...diganti saja dech..!!?

      Hapus
    3. jahat pisan atuh ihh, main ganti-ganti.
      emang bola pakai pemain ganti.
      (hallah opo to yo)

      Hapus
    4. iya ganti aja deh ,,, biar nama sy double .... hehehehe :) :>)

      Hapus
    5. berarti mas Fiu setuju ya kalau nama kang jum diganti saja..
      menurut kang jum bagaimana, apakah kang jum juga setuju.?

      Hapus
    6. saya sich cuman bisa :-(

      Hapus
    7. kalau namaku di ganti ga jadi tenar dund diriku (c)

      Hapus
    8. hehehe, jangan deh klo gtu, kasihan kang jum nya ... ntr pulang kerumah gantung kunci lgi ... :D hehe

      biar kang jum juga tenar ... :)

      Hapus
  2. mbak Dev memang cantik deh, (f)
    kode yang no 8, klo teksnya dikasih link gimana caranya mbak Dev?? semecam teks anchor link gitu

    BalasHapus
    Balasan
    1. .popEffect{display: inline;text-indent: 8px}
      .popEffect span{
      animation: pop 12.5s linear infinite 0s;
      -moz-animation: pop 12.5s linear infinite 0s;
      -webkit-animation: pop 12.5s linear infinite 0s;
      color: #FC6;opacity: 0;overflow: hidden;position: absolute}

      .popEffect span:nth-child(2) {animation-delay: 2.5s}
      .popEffect span:nth-child(3) {animation-delay: 5s}
      .popEffect span:nth-child(4) {animation-delay: 7.5s}
      .popEffect span:nth-child(5) {animation-delay: 10s}

      @keyframes pop{
      0% { opacity: 0; }
      5% { opacity: 0; transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
      10% { opacity: 1; transform: translateY(0px); }
      25% { opacity: 1; transform: translateY(0px); }
      30% { opacity: 0; transform: translateY(0px); }
      80% { opacity: 0; }
      100% { opacity: 0;}}


      selanjutnya kita panggil elemen CSS-nya dengan HTML seperti ini:

      <div class="wrapper">
      <div class="sentence">
      Teks Anda Disini...<div class="popEffect">
      <span>Amazing</span>
      <span>Beautiful</span>
      <span>Cute</span>
      <span>Delightful</span>
      <span>Emotional</span>
      </div>
      </div>
      </div>


      sisipkan tag <a href..>Teks</a>, contoh seperti ini:

      <span><a href="http://sahabatblogger77.blogspot.com">Amazing</a>&lt/span>

      Hapus
    2. terima kasih mbak Dev, saya bungkus buat oleh-oleh di blog :D

      Hapus
    3. nambah puyeng hehe.. tapi coba diserap ya mba trims

      Hapus
  3. Keren Mbak. Apalagi ada nama saya juga di sana. (h)
    Saya suka yang nomor 10.

    BalasHapus
  4. klo yang buta devy sih sy suka semuuaaaaaaaaaaaa ..... x-) hehehehe
    tpiiii .... ngmong2 gmn cara nemplokinnya coba ..hehe

    bayangan yg kemarn aja maslah salah mulu, yg muncul lgi2 bayangannya devy .... :)

    BalasHapus
    Balasan
    1. tinggal dipilih salah satu mas,

      Hapus
    2. eh ada slah ketik tuh ... bru ngeh sy ...hehe mksudnya klo yg buat devy ... buka buta ....xixixixixixi

      Hapus
    3. tadinya devy juga kaget mas, masa devy dikatai buta, pakai seneng lagi, tetapi biasa mas, sudah lumrah kalau sering salah ketik, dimaafkan kok, hehe

      Hapus
    4. hhehehe,,, iya nih gerogi ngetiknya jadi salh ketik ... :)

      Hapus
    5. aku juga mau ikut-ikutan salah ketik ahh,,_
      tapi akunya ga bisa dech kayaknya cz akunya ingin tampil perfect didepan mbak Devy :d
      #efek-sepikan-mbak-Deva :d

      Hapus
    6. ciaaaa.... iya stuju kang jum sih hrus tampil perfect ... jngn spt sy ,,,,,hehehehe :)

      Hapus
  5. Kapan mampir lagi mbak? Udah lama nih nggak mampir

    BalasHapus
    Balasan
    1. kapan-kapan saja mas imron cz hujan melle nich :d

      Hapus
  6. wah ini bermanfaat banget bagi saya, makasih udah sharing ya, saya bookmark :D

    BalasHapus
    Balasan
    1. silahkan mas salman khan, eh maksudnya mas salman faris (c)

      Hapus
  7. keren animasi-animasi textnya (h)

    BalasHapus
    Balasan
    1. secara gttu loch, mbak devy cute :d

      Hapus
  8. Hmm bagus sekali ya effectnya. Apalagi yang nomer 10, kayak sesuatu yang copot terus jatuh. Keren mbak!.

    BalasHapus
  9. cakep pisan, seakan blogku tampilannya ga ada apa apanya dibanding ini hehe..

    BalasHapus
  10. saya tertarik nomor 4 mbak, ijin memperlajrinya ya :D

    BalasHapus
  11. saya balas komen aja deh hehe, sukses selalu (k)

    BalasHapus
  12. bikin berat loadning blog gak ya ...

    BalasHapus
  13. wahh dapet buat tangan nih di blog saya ... tapi sayangnya rada ribet nih -_-

    BalasHapus
  14. waah artikelnya bermanfaat sekali,terimakasih sudah share :)

    BalasHapus
  15. Ijin belajar css ah sama mba Devy anu cakep :)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK