Transform dan Transition merupakan Property yang terdapat di CSS3. Transform digunakan untuk merubah bentuk suatu objek, baik perubahan skala maupun perputaran. Sedangkan Transition digunakan untuk mengatur waktu perubahan dari satu bentuk ke bentuk lainnya. Dengan memanfaatkan Property ini, nantinya Anda dapat membuat Animasi dan memberikan
efek menarik di website yang didesain. Untuk mendapatkan hasil yang maksimal, tentunya Anda harus menggunakan Browser yang mendukung begitu juga dengan user. Property Transform didukung oleh browser sebagai berikut : Sedangkan Property Transition didukung oleh browser sebagai berikut : Sekarang, mari perhatikan contoh animasi sederhana berikut ini : Hello Berikut syntax untuk menuliskan
transform & transition [animasi diatas] : Keterangan : Dengan kreatifitas, Anda dapat membuat animasi lainnya untuk mendesain web yang indah. Untuk memberikan pengetahuan tambahan dan semangat belajar, berikut silahkan Anda lihat kreasi animasi menggunakan Property Transition dan Transform yang ada di CSS 3.Memulai
CSS3 : Transform dan Transition
#kotak
{
width:150px;
height:100px;
margin:30px 0 30px 20px;
background-color:yellow;
transition:all .5s;/*Pernyataan untuk memberi efek Transition secara umum*/
-moz-transition:all .5s;/*Firefox*/
-webkit-transition:all .5s;/*Safari dan Chrome*/
-o-transition:all .5s;/*Opera*/
}
#kotak:hover {
transform:rotate[30deg];/*Pernyataan untuk memberi efek transform secara umum*/
-ms-transform:rotate[30deg]; /* IE 9 */
-moz-transform:rotate[30deg]; /* Firefox */
-webkit-transform:rotate[30deg]; /* Safari dan Chrome */
-o-transform:rotate[30deg];/*Opera*/
}
-moz-transition : pernyataan untuk memberi transition [durasi] pada Browser Firefox.
all : diterapkan pada semua bagian objek
.5s : waktu transisi ke bentuk yang lain adalah 0.5 detik.
-moz-transform : pernyataan untuk memberi efek
transform pada Browser Firefox.
rotate : efek transform yang diberikan adalah efek perputaran.
80deg : perputaran ebjek sebesar 80 derajat.Kreasi Menggunakan CSS 3
CSS 3
Social Icons
Menu Navigasi Efek Zoom
CSS 3 Image Galery
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:
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.
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 { 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 Perhatikan bahwa ketika mouse kursor keluar dari elemen, itu akan secara bertahap berubah kembali ke gaya aslinya. Contoh berikut menambahkan efek transisi untuk kedua lebar dan properti tinggi, dengan durasi 2 detik untuk lebar dan 4 detik untuk ketinggian: div { Cobalah sendiri " The Properti transisi-waktu-fungsi dapat memiliki nilai berikut: Contoh berikut menunjukkan
beberapa kurva kecepatan yang berbeda yang dapat digunakan: #div1 {transition-timing-function: linear;} Cobalah sendiri " The Contoh berikut memiliki delay kedua 1 sebelum awal: div { Cobalah sendiri " Contoh berikut juga menambahkan
transformasi untuk efek transisi: div { Cobalah sendiri " Sifat CSS3 transisi dapat ditentukan satu per satu, seperti ini: div { Cobalah sendiri " atau dengan menggunakan properti singkat
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»
Latihan 5 » Tabel berikut ini berisi semua sifat-sifat transisi: Contoh
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
} Ubah Beberapa Nilai Properti
Contoh
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
} Tentukan Curve Kecepatan Transition
transition-timing-function
properti menentukan kurva kecepatan efek transisi. 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
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;} Menunda Efek Transisi
transition-delay
properti menetapkan penundaan [dalam detik] untuk efek transisi. Contoh
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
} Transisi + Transformasi
Contoh
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
} Lebih Contoh Transisi
Contoh
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
} transition
: Uji Diri dengan Latihan!
Properti CSS3 Transition
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
Chủ Đề