» » 10 Gaya Efek CSS Animasi Pada Teks

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 =

Devy Indriyani

Join To Sahabat Blogger 77
Diposting oleh di 15.1.15
Label:

35 komentar

  1. kangjum15 Januari, 2015

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

    BalasHapus
    Balasan
    1. kangjum15 Januari, 2015

      belum ada mbak devy cz diriku pakai wp ciiinnn (c)

      Hapus
    2. Devy15 Januari, 2015

      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. kangjum15 Januari, 2015

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

      Hapus
    4. fiu s16 Januari, 2015

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

      Hapus
    5. Devy16 Januari, 2015

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

      Hapus
    6. kangjum16 Januari, 2015

      saya sich cuman bisa :-(

      Hapus
    7. kangjum16 Januari, 2015

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

      Hapus
    8. fiu s16 Januari, 2015

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

      biar kang jum juga tenar ... :)

      Hapus
  2. Buret MRj15 Januari, 2015

    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. Devy16 Januari, 2015

      .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. Buret MRj16 Januari, 2015

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

      Hapus
    3. santika fadilah16 Januari, 2015

      nambah puyeng hehe.. tapi coba diserap ya mba trims

      Hapus
  3. Ridha15 Januari, 2015

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

    BalasHapus
  4. fiu s16 Januari, 2015

    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. Devy16 Januari, 2015

      tinggal dipilih salah satu mas,

      Hapus
    2. fiu s16 Januari, 2015

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

      Hapus
    3. Devy16 Januari, 2015

      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. fiu s16 Januari, 2015

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

      Hapus
    5. kangjum16 Januari, 2015

      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. fiu s16 Januari, 2015

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

      Hapus
  5. imyon16 Januari, 2015

    Kapan mampir lagi mbak? Udah lama nih nggak mampir

    BalasHapus
    Balasan
    1. kangjum16 Januari, 2015

      kapan-kapan saja mas imron cz hujan melle nich :d

      Hapus
  6. Salman Faris16 Januari, 2015

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

    BalasHapus
    Balasan
    1. kangjum16 Januari, 2015

      silahkan mas salman khan, eh maksudnya mas salman faris (c)

      Hapus
  7. Sobat Bonsai16 Januari, 2015

    keren animasi-animasi textnya (h)

    BalasHapus
    Balasan
    1. kangjum16 Januari, 2015

      secara gttu loch, mbak devy cute :d

      Hapus
  8. Ary Setyobudi16 Januari, 2015

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

    BalasHapus
  9. santika fadilah16 Januari, 2015

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

    BalasHapus
  10. Ibrahim16 Januari, 2015

    saya tertarik nomor 4 mbak, ijin memperlajrinya ya :D

    BalasHapus
  11. warcoff16 Januari, 2015

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

    BalasHapus
  12. Ice Cream16 Januari, 2015

    bikin berat loadning blog gak ya ...

    BalasHapus
  13. Khoirun Naim17 Januari, 2015

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

    BalasHapus
  14. Unknown22 Januari, 2015

    waah artikelnya bermanfaat sekali,terimakasih sudah share :)

    BalasHapus
  15. Admin+23 Januari, 2015

    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
Langganan: Posting Komentar (Atom)