tutorial pengembangan web terbaru
 

CSS transisi

❮ Sebelumnya Berikutnya Bab ❯

Transisi CSS3

transisi CSS3 memungkinkan Anda untuk mengubah nilai properti lancar (dari satu nilai yang lain), selama durasi tertentu.

Contoh: Mouse elemen di bawah ini untuk melihat efek CSS3 transisi:

CSS3

Browser Dukungan untuk Transisi

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Nomor diikuti oleh -webkit-, -moz- , atau -o- menentukan versi pertama yang bekerja dengan awalan.

Milik
transition 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-delay 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-duration 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-property 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-timing-function 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-

Cara Menggunakan CSS3 Transisi?

Untuk membuat efek transisi, Anda harus menentukan dua hal:

  • properti CSS Anda ingin menambahkan efek ke
  • durasi efeknya

Catatan: Jika bagian durasi tidak ditentukan, transisi tidak akan berpengaruh, karena nilai default adalah 0.

Contoh berikut menunjukkan 100px * 100px red <div> elemen. The <div> elemen juga telah ditentukan efek transisi untuk properti lebar, dengan durasi 2 detik:

Contoh

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

Efek transisi akan dimulai ketika properti CSS yang ditentukan (lebar) perubahan nilai.

Sekarang, mari kita tentukan nilai baru untuk properti lebar ketika pengguna mouse di atas <div> elemen:

Contoh

div:hover {
    width: 300px;
}
Cobalah sendiri "

Perhatikan bahwa ketika mouse kursor keluar dari elemen, itu akan secara bertahap berubah kembali ke gaya aslinya.

Ubah Beberapa Nilai Properti

Contoh berikut menambahkan efek transisi untuk kedua lebar dan properti tinggi, dengan durasi 2 detik untuk lebar dan 4 detik untuk ketinggian:

Contoh

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}
Cobalah sendiri "

Tentukan Curve Kecepatan Transition

The transition-timing-function properti menentukan kurva kecepatan efek transisi.

Properti transisi-waktu-fungsi dapat memiliki nilai berikut:

  • ease - menentukan efek transisi dengan awal yang lambat, kemudian cepat, kemudian berakhir perlahan (ini adalah default)
  • linear - menentukan efek transisi dengan kecepatan yang sama dari awal sampai akhir
  • ease-in - menentukan efek transisi dengan awal yang lambat
  • ease-out - menentukan efek transisi dengan ujung yang lambat
  • ease-in-out - menentukan efek transisi dengan awal yang lambat dan akhir
  • cubic-bezier(n,n,n,n) - memungkinkan Anda menentukan nilai Anda sendiri dalam cubic-bezier fungsi

Contoh berikut menunjukkan beberapa kurva kecepatan yang berbeda 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;}
Cobalah sendiri "

Menunda Efek Transisi

The transition-delay properti menetapkan penundaan (dalam detik) untuk efek transisi.

Contoh berikut memiliki delay kedua 1 sebelum awal:

Contoh

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}
Cobalah sendiri "

Transisi + Transformasi

Contoh berikut juga menambahkan transformasi untuk efek transisi:

Contoh

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}
Cobalah sendiri "

Lebih Contoh Transisi

Sifat CSS3 transisi dapat ditentukan satu per satu, seperti ini:

Contoh

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}
Cobalah sendiri "

atau dengan menggunakan properti singkat transition :

Contoh

div {
    transition: width 2s linear 1s;
}
Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »

Properti CSS3 Transition

Tabel berikut ini berisi semua sifat-sifat transisi:

Milik Deskripsi
transition Sebuah properti singkat untuk menetapkan empat sifat transisi ke satu properti
transition-delay Menentukan penundaan (dalam detik) untuk efek transisi
transition-duration Menentukan berapa detik atau milidetik efek transisi diperlukan untuk menyelesaikan
transition-property Menentukan nama properti CSS efek transisi untuk
transition-timing-function Menentukan kurva kecepatan efek transisi

❮ Sebelumnya Berikutnya Bab ❯