Transisi CSS

Transisi CSS

CSS transisi memungkinkan Anda mengubah nilai atribut secara halus dalam waktu yang diberikan.

Pindahkan penanda mouse ke elemen ini untuk melihat efek transisi CSS:

CSS

Pada bab ini, Anda akan belajar tentang properti berikut:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Dukungan browser untuk transisi

Angka di tabel menandai versi browser pertama yang mendukung atribut ini penuh.

properti Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Bagaimana cara menggunakan transisi CSS?

Untuk membuat efek transisi, Anda harus menentukan dua hal:

  • Atribut CSS yang ingin Anda tambahkan efek
  • Durasi efek

Perhatian:Jika bagian durasi tidak disebutkan, transisi tidak akan ber efek, karena nilai defaultnya adalah 0.

Contoh di bawah ini menunjukkan elemen <div> merah dengan ukuran 100px * 100px. Elemen <div> juga menentukan efek transisi untuk atribut width, dengan durasi 2 detik:

Contoh

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Transisi akan dimulai saat nilai atribut CSS (width) berubah.

Sekarang, mari kita tentukan nilai baru untuk atribut width saat penanda mouse di atas elemen <div>:

Contoh

div:hover {
  width: 300px;
}

Coba sendiri

Perhatikan, ketika penanda cursor keluar dari elemen, dia akan perlahan kembali ke gaya aslinya.

Ubah beberapa nilai properti

Contoh di bawah menambahkan efek transisi untuk atribut lebar dan tinggi, lebar adalah 2 detik, tinggi adalah 4 detik:

Contoh

div {
  transition: lebar 2 detik, tinggi 4 detik;
}

Coba sendiri

Tentukan kurva kecepatan transisi

transition-timing-function Properti menentukan kurva kecepatan efek transisi.

Properti transition-timing-function menerima nilai berikut:

  • ease - Menentukan efek transisi yang mulai lambat, kemudian mempercepat, dan kemudian berhenti lambat (bawaan)
  • linear - Menentukan efek transisi yang memiliki kecepatan yang sama dari awal hingga akhir
  • ease-in - Menentukan efek transisi yang mulai lambat
  • ease-out - Menentukan efek transisi yang berakhir lambat
  • ease-in-out - Menentukan efek transisi yang mulai dan berakhir lambat
  • cubic-bezier(n,n,n,n) - Memungkinkan Anda menentukan nilai sendiri di tiga fungsi kuadratik Bezier

Contoh di bawah menunjukkan beberapa kurva kecepatan yang dapat digunakan:

Contoh

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Coba sendiri

Jeda efek transisi

transition-delay Properti menentukan jeda efek transisi (dalam detik).

Contoh di bawah memiliki jeda 1 detik sebelum dimulai:

Contoh

div {
  transition-delay: 1 detik;
}

Coba sendiri

Transisi + Transformasi

Contoh di bawah menambahkan efek transisi untuk transisi:

Contoh

div {
  transition: lebar 2 detik, tinggi 2 detik, transformasi 2 detik;
}

Coba sendiri

Contoh transisi lainnya

Anda dapat menentukan properti transisi CSS satu persatu seperti berikut:

Contoh

div {
  transition-property: lebar;
  transition-duration: 2 detik;
  transition-timing-function: linear;
  transition-delay: 1 detik;
}

Coba sendiri

atau gunakan singkatan transition Properti:

Contoh

div {
  transition: lebar 2 detik linear 1 detik;
}

Coba sendiri

Properti transisi CSS

Tabel di bawah menampilkan semua properti transisi CSS:

properti deskripsi
transition Atribut singkat, digunakan untuk menetapkan empat atribut transisi ke satu atribut.
transition-delay Tentukan jeda efek transisi (dalam detik).
transition-duration Tentukan berapa lama waktu atau milisecond efek transisi berlangsung.
transition-property Tentukan nama properti CSS yang dihadapi efek transisi.
transition-timing-function Tentukan garis lurus kecepatan efek transisi.