Latest web development tutorials

transisi CSS3

transisi CSS3

CSS3, kita harus menambahkan efek yang dapat dikonversi dari satu gaya ke waktu lain, tanpa menggunakan animasi Flash atau JavaScript. Mouse unsur-unsur berikut:


Mouse unsur-unsur berikut:

CSS3
transisi

Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.

Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.

属性
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-

Bagaimana cara kerjanya?

CSS3 transisi adalah unsur secara bertahap berubah dari satu gaya ke efek lain.

Untuk mencapai hal ini, dua hal harus didefinisikan:

  • Saya ingin menambahkan efek sifat CSS
  • Tentukan durasi efek.
OperaSafariChromeFirefoxInternet Explorer

contoh

atribut lebar diterapkan efek transisi, durasi 2 detik:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Catatan: Jika Andatidak menentukan batas waktu, transisi tidak akan berpengaruh, karena nilai default adalah 0.

Efeknya akan mengubah nilai perubahan properti CSS yang ditentukan. Perubahan properti CSS khas adalah mouse pengguna lebih dari unsur:

OperaSafariChromeFirefoxInternet Explorer

contoh

Ketentuan ketika mouse pointer suspensi (: hover) ke <div> elemen ketika:

div: hover
{
width: 300px;
}

Coba »

Catatan: Ketika kursor mouse ke elemen, secara bertahap berubah gaya aslinya


Jumlah perubahan

Untuk menambahkan lebih dari satu efek dari gaya perubahan, menambahkan atribut dipisahkan dengan koma:

OperaSafariChromeFirefoxInternet Explorer

contoh

Ditambahkan efek lebar, tinggi, dan transisi:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

Coba »


Properti transisi

Tabel berikut ini berisi semua sifat-sifat transisi:

milik deskripsi CSS
transisi properti singkat untuk setting empat sifat transisi dalam satu properti. 3
transisi-properti Nama transisi properti CSS ketentuan berlaku. 3
transisi durasi Untuk menentukan waktu efek transisi menghabiskan. default adalah 0. 3
transisi-waktu-fungsi Yang telah ditentukan transisi waktu efek kurva. defaultnya adalah "kemudahan". 3
transisi-delay Ketentuan kapan mulai efek transisi. default adalah 0. 3

Dua contoh berikut mengatur semua atribut transisi:

OperaSafariChromeFirefoxInternet Explorer

contoh

Gunakan semua properti transisi di salah satu contoh:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

Coba »

OperaSafariChromeFirefoxInternet Explorer

contoh

Dan contoh efek transisi yang sama di atas, tetapi menggunakan sifat transisi singkatan:

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

Coba »