Mengontrol Efek Gerak Dengan Perintah Hover - Dengan penggunaan sebuah elemen CSS-animasi, maka dengan mudah kita membuat sebuah objek dapat bergerak. Karena pada hakikatnya keberadaan animasi ini berfungsi untuk membuat objek agar dapat bergerak secara otomatis (tanpa perintah).

Apa itu Animasi (efek gerak).?
Animasi
adalah penggabungan beberapa fungsi elemen yang dibentuk dan disusun secara beraturan untuk membuat objek agar dapat bergerak yang ditentukan dengan nilai pertambahan waktu yang terjadi, objek sebagai target bisa berupa gambar atau tulisan. Biasanya sang Animator dalam membuat efek gerak (animasi) akan menentukan terlebih dahulu alur gerak suatu objek dari keadaan awal sampai keadaan akhir gerakan objek tersebut, sehingga dengan perumusan alur gerak yang tepat, maka akan dapat menghasilkan animasi (efek gerak) yang menarik untuk disaksikan.

CSS style picture



PROSES PEMBUATAN ANIMASI (Efek Gerak)
Ada 2 kategori dalam membuat efek gerak, diantaranya adalah:
1. Sistem Otomatis

Efek gerak yang dihasilkan dengan sistem ini adalah pergerakan objek secara otomatis. Tanpa ada suatu perintah, objek akan bergerak saat ditampilkan, sebagai contoh:


2. Perintah Hover

Hover yang dimaksud disini adalah objek hanya akan dapat bergerak saat pointer mouse Anda berada diatas objek tersebut, dan gerakan efek akan kembali pada titik awal saat pointer mouse dilepas. singkatnya efek gerak akan terjadi hanya apabila Anda mengontrol dengan perintah hover, sebagai contoh:


REVERSE BOX HOVER
Menggerakkan objek dengan nilai start-top dan bergerak menuju ke kanan dengan cepat hingga akhir, dan akan kembali ke atas sebelum akhirnya menuju awal dengan nilai-down.

<style type="text/css">
#stage {
  position: relative;
  height: 4em;
  background: #E9967A;
  text-align: center;}

#box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  background: #DC143C;
  line-height: 2em;
  color: #fff;
  -webkit-transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);
  -moz-transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);
  -ms-transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);
  transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);}

#stage:hover #box {
  left: calc(100% - 100px);
  bottom: 2em;
  left:660px;
  -webkit-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  -moz-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  -ms-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);}
</style>
<div id="stage">
   <div id="box">
       Hover Me.!
   </div>
</div>


DEMO SHOW





BOX HOVER DOWN BACK
Kebalikan sebelumnya, namun gerakan efek saat kembali akan kebawah terlebih dahulu hingga akhirnya menuju titik awal saat pointer di lepas.

<style type="text/css">
#stage {...}
#box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  background: #DC143C;
  line-height: 2em;
  color: #fff;
  -webkit-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  -moz-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  -ms-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);}

#stage:hover #box {
  left: calc(100% - 100px);
  bottom: 2em;
  left:660px;}
</style>
<div id="stage">
    <div id="box">
       Hover Me.!
    </div>
</div>


DEMO SHOW





ROTATION STOP
Gerakan efek berputar saat akan berada diakhir, namun tampilan background saya buat berubah sebelum akhirnya gerakan berhenti.

<style type="text/css">
#stage {...}
#block {
  ...

  -webkit-transition-property: left, top, background, -webkit-transform;
  -moz-transition-property: left, top, background, -moz-transform;
  -webkit-transition-duration: 2s, 2s, 1s, 1s;
  -moz-transition-duration: 2s, 2s, 1s, 1s;
  -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
  -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
  -webkit-transition-delay: 0, 0, 0, 1s;
  -moz-transition-delay: 0, 0, 0, 1s;
  transition-delay: 0, 0, 0, 1s;}

#stage:hover #block {
  ...

  -webkit-transform: rotate(720deg);
  -moz-transform: rotate(720deg);
  -o-transform: rotate(720deg);
  -ms-transform: rotate(720deg);
  transform: rotate(720deg);
  left: calc(100% - 102px);}
</style>
<div id="stage">
    <div id="block">
       Hover Me.!
    </div>
</div>


DEMO SHOW





TRANSISI DELAY
Gerakan dengan perhitungan delay, efek akan bekerja dengan waktu, misalnya dengan durasi 5 menit, maka efek akan terlihat jika waktu sudah mencapai 5 menit.

<style type="text/css">
.fader2:hover td {background-color: green; color:#fff;}
.fader2 td {
  background-color: red;
  color:#fff;
  transition-timing-function: cubic-bezier(1,0,1,0);
  -moz-transition-timing-function: cubic-bezier(1,0,1,0);
  -webkit-transition-timing-function: cubic-bezier(1,0,1,0);
  -ms-transition-timing-function: cubic-bezier(1,0,1,0);

  transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;}
</style>
<table class="fader2" cellpadding="10" cellspacing="2">
<tr> <td style="transition-delay: 0s;-moz-transition-delay: 0s;">10%</td> <td style="transition-delay: 0.5s;-moz-transition-delay: 0.5s;">20%</td> <td style="transition-delay: 1.0s;-moz-transition-delay: 1.0s;">30%</td> <td style="transition-delay: 1.5s;-moz-transition-delay: 1.5s;">40%</td> <td style="transition-delay: 2.0s;-moz-transition-delay: 2.0s;">50%</td> <td style="transition-delay: 2.5s;-moz-transition-delay: 2.5s;">60%</td> <td style="transition-delay: 3.0s;-moz-transition-delay: 3.0s;">70%</td> <td style="transition-delay: 3.5s;-moz-transition-delay: 3.5s;">80%</td> <td style="transition-delay: 4.0s;-moz-transition-delay: 4.0s;">90%</td> <td style="transition-delay: 4.5s;-moz-transition-delay: 4.5s;">100%</td> </tr>
</table>


DEMO SHOW




STEP IT UP
Posisi awal objek dalam keadaan tenggelam dibawah, dengan perintah hover objek akan bergerak berlahan hingga akhirnya mengapung diatas (step by step).

<style type="text/css">
.box {
  position: relative;
  height: 320px;
  background:#ccc;}

.step-right {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(255,0,0,0.5);}

.box:hover .step-right {
  width: 100%;
  transition-duration: 5s;
  -moz-transition-duration: 5s;
  -webkit-transition-duration: 5s;
  -ms-transition-duration: 5s;

  transition-timing-function: steps(10, start);
  -moz-transition-timing-function: steps(10, start);
  -webkit-transition-timing-function: steps(10, start);
  -ms-transition-timing-function: steps(10, start);}

.step-up {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(0,0,255,0.5);}

.box:hover .step-up {
  height: 100%;
  transition-duration: 5s;
  -moz-transition-duration: 5s;
  -webkit-transition-duration: 5s;
  -ms-transition-duration: 5s;

  transition-timing-function: steps(10, end);
  -moz-transition-timing-function: steps(10, end);
  -webkit-transition-timing-function: steps(10, end);
  -ms-transition-timing-function: steps(10, end);}
</style>
<div class="box">
  <div class="step-right"></div>
    <div class="step-up">
       Hover Me.!
    </div>
</div>


DEMO SHOW




Apapun yang akan Anda jadikan sebagai target gerak, hal yang terpenting dalam pembuatan efek gerak animasi adalah dengan memperhatikan 2 hal berikut, yaitu: Objek dan alur gerak. Selebihnya terserah Anda.!! hehe..

Semoga Anda menemukan Inspirasi dari tutorial kali ini. Terimakasih

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mengontrol Efek Gerak Dengan Perintah Hover
Ditulis oleh= Devy Indriyani
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 =

10 komentar

  1. Bisa dicoba nih klo udh bnyk artikel diblog sya ijin follow yak biar ga lupa :)

    BalasHapus
  2. tombolnya jadi pindah-pindah gitu ya mbak :-)

    BalasHapus
    Balasan
    1. bukan berpindah-pindah sih mas, tepatnya pergerakan objek yang dapat kita kontrol dengan perintah hover

      Hapus
  3. Wah mbak Devy ini emang jagonya dah kalo yg beginian.

    BalasHapus
  4. bagus2 beb..!,kreatif N imajinatif.. sy lebih cenderung ke ROTATION STOP.. kalau bisa sy kasi nama "Efek jinak2 Merpati".. :-d. ...efek ini bisa dikombinasikn dgn gambar atau yg lain?,. jadi ada ide lagi inih..!

    .oiyya..yg judul di demo kode css ovalnya apa Beb..!, Please..! hanya ovalnya sj..!, maksi sebelumnya..!

    BalasHapus
    Balasan
    1. benar mas, dengan memahami elemen-elemen seperti diatas, dengan mudah kita membuat efek yang sesuai keinginan, seperti tutorial sebelumnya tentang

      Efek Gambar Animasi Dengan 3D

      untuk membuat border oval, kita bisa gunakan CSS border-radius mas seperti ini:
      [pre]span {
      height:30px;
      padding:10px 15px;
      font:normal 13px/normal Arial,sans-serif;
      border-radius:50%;
      }[/pre]

      dan hasilnya -

      ➔ DEMO

      Hapus
    2. sip..sip..makasi ya..!, makin.. :-#

      Hapus
    3. seip, Terimakasih kembali dah,,hehe..!!

      Hapus
  5. Luar biasa Mbak Devi hasil nya sangat menarik, saya ijin coba yah
    Terima kasih atas tutorialnya. semoga sukses selalu :)

    BalasHapus
  6. waahhh bagus nih buat dipasang, tapi memberatkan gak yahh.. hmmm mikir dulu deh ;)

    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