7.4.15
31
Efek Gerak Animasi Dengan CSS3 - Bila melihat sesuatu yang bergerak, sudah pasti kita ingin memperhatikannya. Efek seperti itulah yang sering digunakan pada sebuah tampilan banner iklan atau objek gambar, tujuannya hanya untuk menarik mata pengunjung agar tertarik dan betah berlama-lama berada disana.

Animasi bisa kita artikan sebagai element untuk membuat sebuah objek dapat bergerak secara otomatis atau tanpa ada perintah, akan tetapi fungsi penggunaan CSS-animation ini tidak dapat berdiri sendiri, artinya animasi effect hanya dituliskan untuk mengatur bentuk gerak pada objek target, sedangkan efek gerak akan dihasilkan dengan media keyframes (@keyframes [objek name]) seperti ini:


// Efek gerak dengan nilai persentasi
@keyframes text {
  0%{transform:rotateX(-5deg) rotateY(-50deg)}
  50%{transform:rotateX(10deg) rotateY(50deg)}
  70%{transform:rotateX(5deg) rotateY(70deg)}
  100%{transform:rotateX(-5deg) rotateY(-50deg)}
}


Teks



Selengkapnya Anda bisa pelajari pada Contoh Bentuk-Bentuk Konsep Animasi di postingan sebelumnya, karena disana sudah saya jelaskan bagaimana cara membuat efek gerak otomatis dengan CSS dan keyframes media syntax. Pertemuan kali ini saya akan memberikan efek ke- 11 lanjutan dari 10 Gaya Efek CSS Animasi Pada Teks, tampilan yang simple dan pekerjaan yang cukup mudah, tinggal Copy semua kode dibawah ini, lalu letakkan pada postingan Anda mode tulis HTML (bukan yang Compose), lengkapnya seperti ini:



<style type="text/css">
.txt-css3{text-align:center;perspective:500}
.text{
  font:bold 60px/90px Tahoma;color:#DC143C;text-shadow:1px 3px 2px #111;
  animation:text 2s infinite;-webkit-animation:text 2s infinite;
  -moz-animation:text 2s infinite;border:4px solid;transform:skew(5deg);
  -webkit-transform:skew(5deg);-moz-transform:skew(5deg)}

@keyframes text {
0%{transform:rotateX(-5deg) rotateY(-50deg)}
50%{transform:rotateX(10deg) rotateY(50deg)}
70%{transform:rotateX(5deg) rotateY(70deg)}
100%{transform:rotateX(-5deg) rotateY(-50deg)}}

/* Support all peramban browser, use.. */
@-webkit-keyframes text { ... }
@-moz-keyframes text { ... }
</style>
<section class="txt-css3">
<article class="text">Sahabat Blogger 77</article>
</section>

Dan hasilnya :




DEMO SHOW




Sambil memahami susunan konsep CSS3 diatas, sambil bermain game yuk disini, ada hadiahnya loh, mau pilih game yang mana..?, tetapi jangan sampai KALAH ya, soalnya hadiahnya akan diberikan hanya kepada juara #1 (top one) saja, hehe...!! selamat bermain.

» Game Menyusun Angka
» Game Test Kecerdasan Ala SAHABAT BLOGGER 77
» Memory Game Picture With jQuery

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Efek Gerak Animasi Dengan CSS3
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 =

31 komentar

  1. menggunakan css aja ya dan pergerakan cukup menarik juga.
    kalu dibikin memutar kayaknya lebih menarik sista. saya pelajari dulu scriptnya. terima kasih

    BalasHapus
    Balasan
    1. alhamdulillah.....ternyata bisa juga pertamax di blog ini...
      maaf pertamax udah habis....digondol bengkel blogger. heeee

      Hapus
    2. Kalau ingin dibuat memutar, tinggal diubah saja mbah media keyframes menjadi kombinasi efek:

      @keyframes spinner {
      from {transform: rotateY(0deg);}
      // gerak berputar 360 deg....
      to {transform: rotateY(-360deg)}
      }

      Hapus
  2. Efeknya udah kayak film matrix....seperti biasa keyen...

    BalasHapus
  3. aku mah main game aja deh mba devy, hadiahnya apa?duit cebu aja gpp deh.ehehehe

    BalasHapus
    Balasan
    1. tergantung pada game yang dimainkan mas, kalau game 1 hadiahnya mesin cuci, dan harus menjadi pemanang attuh, dan game yang ke-2 hadiahnya hmm....!!
      rahasia dech, surprize gitu.?

      Hapus
    2. gamenya mana sih?
      game ke 2 hadiahnya apa ya? jangan2 kaya iklan jual rumah milik ibu Wina.hehe

      Hapus
    3. main rahasiaan nih mba..

      Hapus
  4. tanpa ada kode script ya mbak, hanya dibalut kode CSS saja :D

    BalasHapus
    Balasan
    1. Untuk mengurangi daya indeks browser mas, jadi cukup dengan CSS saja, efek gerak sudah bisa kita dapatkan dan buat tanpa membuat loading blog menjadi berat jika dibandingkan dengan menggunakan js.

      Hapus
  5. Mbah tanya ni? apakah dengan efek seperti ini membuat loading blog berat atau tidak?

    BalasHapus
    Balasan
    1. tuh mbah, mbak friska mau tanya nih.?
      kira-kira menurut mbah berat gak ini efek jika digunakan pada blog, hmmm..!! mbah dinan kagak mau jawab sih, kemana..!!?

      Hapus
  6. Efek gerak memang unik kelihatanya diblog..makasih udah berbagi ilmunya devi..salam satriyoku

    BalasHapus
  7. aku pernah menggunakan efek gerak yang berputar itu dari devy, namanya lupa lagi, ini hanya satu gambar ya.. o ya, kalau di browser mozila scriptnya bekerja juga ngga.?

    BalasHapus
    Balasan
    1. mozilla belum bisa membaca dari segi efeknya mbak, jadi perlu kita tambahkan kode pendukungnya seperti ini:

      @-moz-keyframes text {
      0%{-moz-transform:rotateX(-5deg) rotateY(-50deg)}
      50%{-moz-transform:rotateX(10deg) rotateY(50deg)}
      70%{-moz-transform:rotateX(5deg) rotateY(70deg)}
      100%{-moz-transform:rotateX(-5deg) rotateY(-50deg)}}


      efeknya pasti langsung dapat dinikmati.

      Hapus
  8. kalau pakai text pasti loading maknyes, saya tes di blog saya ah 8-)

    BalasHapus
  9. hebat,cuma dengan css saja sudah bisa.
    tapi misalnya,gerak itu terjadi setelah mouse di arahkan pada objek gimana mba?

    BalasHapus
    Balasan
    1. perintah media keyframes merupakan perintah otomatis, jadi kalau diperintah dengan sentuhan mouse (on Mouse Hover) ganti nilainya dengan hover effect, misalnya seperti ini:

      .text:hover {..letakkan fungsinya disini..}

      atau selengkapnya mas Adam bisa pelajari konsepnya disini:

      Mengontrol Efek Gerak Dengan Perintah Hover

      Hapus
  10. kebutuhan akan keindahan dan betahnya pengunjung blog memang harus diberikan pelayanan yang maksimal tapi tetap loading blog ringan, efek gerak dengan hanya menggunakan CSS tentu makjleb banget nih kerennya, tuh liat ajah demo nya mantep deh ih

    BalasHapus
  11. Ini bikin berat gak sih mas? maaf aku sama sekali nggak paham kayak beginian :-D

    BalasHapus
  12. Efeknya bagus untuk memperindah tampilan teks pada blog. Saya pelajari dan coba dulu pada blog saya Mbak....mudah2an cocok. Trims atas sharing trik nya ya semoga makin rame

    BalasHapus
  13. Nah loh
    Otakku dah ga nyampe buat mikirin yang beginian
    mau tau jadi aja boleh..? :D

    BalasHapus
  14. ko di blog saya ga gerak gerak ya

    BalasHapus
    Balasan
    1. support all peramban browser, Tampbahkan kode ini:

      @-webkit-keyframes text {
      0%{-webkit-transform:rotateX(-5deg) rotateY(-50deg)}
      50%{-webkit-transform:rotateX(10deg) rotateY(50deg)}
      70%{-webkit-transform:rotateX(5deg) rotateY(70deg)}
      100%{-webkit-transform:rotateX(-5deg) rotateY(-50deg)}}

      @-moz-keyframes text {
      0%{-moz-transform:rotateX(-5deg) rotateY(-50deg)}
      50%{-moz-transform:rotateX(10deg) rotateY(50deg)}
      70%{-moz-transform:rotateX(5deg) rotateY(70deg)}
      100%{-moz-transform:rotateX(-5deg) rotateY(-50deg)}}

      Hapus
    2. tambah sebelah mana?

      Hapus
    3. tulis ulna dong. hehe :)

      Hapus
    4. hehe...OK dech kalau secara lengkap akan menjadi seperti ini mas:

      <style type="text/css">
      .txt-css3{text-align:center;perspective:500}
      .text{
      font:bold 60px/90px Tahoma;color:#DC143C;text-shadow:1px 3px 2px #111;
      animation:text 2s infinite;-webkit-animation:text 2s infinite;
      -moz-animation:text 2s infinite;border:4px solid;transform:skew(5deg);
      -webkit-transform:skew(5deg);-moz-transform:skew(5deg)}

      @keyframes text {
      0%{transform:rotateX(-5deg) rotateY(-50deg)}
      50%{transform:rotateX(10deg) rotateY(50deg)}
      70%{transform:rotateX(5deg) rotateY(70deg)}
      100%{transform:rotateX(-5deg) rotateY(-50deg)}}

      @-webkit-keyframes text {
      0%{-webkit-transform:rotateX(-5deg) rotateY(-50deg)}
      50%{-webkit-transform:rotateX(10deg) rotateY(50deg)}
      70%{-webkit-transform:rotateX(5deg) rotateY(70deg)}
      100%{-webkit-transform:rotateX(-5deg) rotateY(-50deg)}}

      @-moz-keyframes text {
      0%{-moz-transform:rotateX(-5deg) rotateY(-50deg)}
      50%{-moz-transform:rotateX(10deg) rotateY(50deg)}
      70%{-moz-transform:rotateX(5deg) rotateY(70deg)}
      100%{-moz-transform:rotateX(-5deg) rotateY(-50deg)}}
      </style>
      <section class="txt-css3">
      <article class="text">...Tulis Teks Anda Disini...</article>
      </section>

      Hapus
    5. mantap betul sip tangkiu

      Hapus
  15. TAMPILAN BLOG AKAN SEMAKIN KEREN NI.

    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