Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Perkenalan CSS Transisi

css transisi transition

CSS Transisi berfungsi untuk menciptakan durasi perpindahan nilai dari sebuah titik awal tampilan menuju titik akhir tampilan. CSS Transisi lebih difokuskan pada CSS Pseudo-Classes, meskipun ternyata juga bisa diterapkan untuk mentransisikan media queries. Kita mulai dengan sebuah objek tanpa efek transisi seperti ini:

Tanpa Transisi

Dan ini adalah sebuah objek dengan efek transisi:

Dengan Transisi

Sintaks CSS Transisi

div {
  -webkit-transition: nama_properti durasi tipe_percepatan delay;
  -moz-transition: nama_properti durasi tipe_percepatan delay;
  -ms-transition: nama_properti durasi tipe_percepatan delay;
  -o-transition: nama_properti durasi tipe_percepatan delay;
  transition: nama_properti durasi tipe_percepatan delay;
}
  • Nama_Properti, ini mewakili properti yang akan dianimasikan.
  • Durasi, digunakan untuk menentukan kecepatan animasi dalam satuan detik.
  • Tipe_Percepatan, digunakan untuk menentukan efek percepatan animasi. Efek-efek percepatan animasi dalam CSS Transisi diantaranya:

    • default
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier
  • Delay, ini jika kamu ingin menerapkan waktu menunggu sebelum efek transisi dijalankan.

Contoh Penerapan Nama Properti

Di sini Saya menentukan nama_properti dengan properti color, maka efek transisi hanya akan berlaku pada properti color saja, sedangkan efek perpindahan warna background tidak ikut ditransisikan:

Transisi pada Warna Huruf Saja
#contoh11 {
  width:200px;
  background:green;
  color:black;
  border:2px solid #222;
  padding:15px;
  font:bold 20px Sans-Serif;
  -webkit-transition: color 1s ease-out;
  -moz-transition: color 1s ease-out;
  -ms-transition: color 1s ease-out;
  -o-transition: color 1s ease-out;
}

#contoh11:hover {
  color:white;
  background:black;
}

Contoh Penerapan Durasi Transisi

Di sini Saya menentukan durasi selama 0.4s pada objek pertama dan 5s pada objek ke dua. Coba kamu rasakan perbedaannya:

0.4s
5s
#contoh12, #contoh13 {
  width:200px;
  background:gray;
  color:black;
  border:2px solid #222;
  padding:15px;
  font:bold 20px Sans-Serif;
}

#contoh12 {
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

#contoh13 {
  -webkit-transition: all 5s ease-out;
  -moz-transition: all 5s ease-out;
  -ms-transition: all 5s ease-out;
  -o-transition: all 5s ease-out;
  transition: all 5s ease-out;
}

#contoh12:hover, #contoh13:hover {
  color:white;
  background:black;
}

Contoh Penerapan Tipe Percepatan

Di sini Saya telah menerapkan tipe-tipe percepatan pada masing-masing objek sesuai dengan namanya. Coba perhatikan perbedaan percepatannya:

default
linear
ease-in
ease-out
ease-in-out
cubic-bezier(0,1,1,0)
cubic-bezier(1,0,0,1)

Dan, meskipun semua objek tampak memiliki kecepatan yang berbeda-beda, namun pada akhirnya mereka semua akan sampai pada titik akhir dalam waktu yang sama. Itulah yang dimaksud dengan percepatan. Hanya langkah animasinya saja yang berbeda, namun tidak pada waktunya tempuhnya.

Cubic-Bezier memungkinkan kita untuk menciptakan percepatan sendiri dengan batasan dimulai dari 0 sampai 1. Pengertian Cubic-Bezier selengkapnya dapat kamu baca di sini (The Art of Web) dan di sini (Wikipedia).

Contoh Penerapan Delay

Dengan menerapkan delay, maka efek animasi akan bekerja setelah beberapa waktu yang ditentukan. Di sini, Saya menerapkan delay selama 5 detik, oleh karena itu efek transisi akan dimulai setelah 5 detik berlalu. Jadi, letakkan saja pointer mousemu di atas objek di bawah ini, kemudian bersabarlah selama lima detik ke depan hehe…

Efek akan bekerja 5 detik kemudian
#delaydemo {
  width:180px;
  padding:40px;
  border:5px solid #990000;
  background:orange;
  color:black;
  font-size:12px;
  cursor:pointer;
  -webkit-box-shadow:0 0 5px #000;
  -moz-box-shadow:0 0 5px #000;
  box-shadow:0 0 5px #000;
  -webkit-transition: all 0.4s ease-out 5s;
  -moz-transition: all 0.4s ease-out 5s;
  -ms-transition: all 0.4s ease-out 5s;
  -o-transition: all 0.4s ease-out 5s;
  transition: all 0.4s ease-out 5s;
}

#delaydemo:hover {
  background:darkorange;
  border-width:0px;
  color:#990000;
  padding:100px;
  font-size:20px;
  -webkit-box-shadow:0 0 0 #000;
  -moz-box-shadow:0 0 0 #000;
  box-shadow:0 0 0 #000;
  -webkit-border-radius:100px;
  -moz-border-radius:100px;
  border-radius:100px;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
}

Lebih Spesifik

#contoh1 {
  /* Safari dan Chrome */
  -webkit-transition-property:width;
  -webkit-transition-duration:1s;
  -webkit-transition-timing-function:linear;
  -webkit-transition-delay:2s;
  /* Firefox 4 */
  -moz-transition-property:width;
  -moz-transition-duration:1s;
  -moz-transition-timing-function:linear;
  -moz-transition-delay:2s;
  /* IE 10+ */
  -ms-transition-property:width;
  -ms-transition-duration:1s;
  -ms-transition-timing-function:linear;
  -ms-transition-delay:2s;
  /* Opera */
  -o-transition-property:width;
  -o-transition-duration:1s;
  -o-transition-timing-function:linear;
  -o-transition-delay:2s;
  /* Standar W3C */
  transition-property:width;
  transition-duration:1s;
  transition-timing-function:linear;
  transition-delay:2s;
}

Contoh Transisi Universal

*:link, *:visited, *:hover, *:active, *:focus {
  -webkit-transition:color .25s linear, background-color .25s linear, border-color .25s linear;
  -moz-transition:color .25s linear, background-color .25s linear, border-color .25s linear;
  -ms-transition:color .25s linear, background-color .25s linear, border-color .25s linear;
  -o-transition:color .25s linear, background-color .25s linear, border-color .25s linear;
  transition:color .25s linear, background-color .25s linear, border-color .25s linear;
}

  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 13 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!