Home / CSS / Mengenal Efek Transisi / Transition CSS3

Cara Download Mengenal Efek Transisi / Transition CSS3 Update Terbaru

Sedikit Info Seputar Mengenal Efek Transisi / Transition CSS3 Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Mengenal Efek Transisi / Transition CSS3, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel CSS, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Mengenal Efek Transisi / Transition CSS3 Terbaru
link: Mengenal Efek Transisi / Transition CSS3

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Mengenal Efek Transisi / Transition CSS3 Terbaru dan Terlengkap 2017

CSS3 Icon PngPada postingan kali ini saya akan membahas dan mengenal lebih jauh mengenai CSS3 Transisi , kita dapat menambahkan efek gerak pada elemen 2D dari satu gaya ke gaya yang lain tanpa menggunakan animasi Flash ataupun JavaScript yang membutuhkan load lebih lama ( Fast is Sexy ).

*( Kekurangan ) Belum support/mendukung pada seluruh browser , dan hanya mendukung pada 4 browser populer saja diantaranya :

1. Internet Explorer tidak lagi mendukung properti transisi.
2. Firefox 4 membutuhkan awalan -moz-.
3. Chrome dan Safari membutuhkan awalan -WebKit-.
4. Opera membutuhkan awalan -o-.


2 hal yang harus di perhatikan agar CSS3 Transisi ini dapat bekerja dengan baik yaitu :

1. Kita harus menentukan Properti CSS.
2. Menentukan durasi efek.

Jika nilai durasi tidak ditentukan maka efek transisi ini tidak akan bekerja karena nilainya masih default yaitu "0".

Sintaks CSS Transisi seperti ini : 

.contoh {
 -webkit-transition: nama_properti durasi tipe_kecepatan delay;
 -moz-transition: nama_properti durasi tipe_kecepatan delay;
 -ms-transition: nama_properti durasi tipe_kecepatan delay;
 -o-transition: nama_properti durasi tipe_kecepatan delay;
 transition: nama_properti durasi tipe_kecepatan delay;
}

Keterangan Sintaks di atas :

1. Nama_Properti ini mewakili properti yang akan dianimasikan.
2. Durasi digunakan untuk menentukan kecepatan animasi dalam satuan detik.
3. Tipe_Kecepatan 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
4. Delay ini jika kamu ingin menerapkan waktu menunggu sebelum efek transisi dijalankan.

Sekarang Kita coba dengan menggunakan event "HOVER/Over" , yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat atau tersentuh, dan ketika pointer mouse keluar dari atas elemen , maka bentuk elemen kembali seperti semula. Sekian penjelasan mengenai Efek CSS3 Transisi yang akan kita bahas kali ini , berikut adalah Kumpulan CSS3 TRANSISI / TRANSISITION dengan Demonstrasi nya ..


1. Contoh Transisi Width / Melebar :

Contoh Elemen yang menggunakan Transisi Width / melebar !

Cara Memanggil-nya : 

<div id="transisi1">Contoh Elemen yang menggunakan Transisi width / melebar !</div>

Kode CSS3-nya : 

#transisi1
{
width:120px;
height:120px;
background-color:#e0e0e0;
border:3px solid #cc0000;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
#transisi1:hover
{
width:500px;
}


2. Contoh Transisi Membesar dan Berputar :

Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !

Cara Memanggil-nya : 

<div id="transisi2">Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !</div>

Kode CSS3-nya : 

#transisi2
{
width:120px;
height:120px;
background-color:#e0e0e0;
border:3px solid #cc0000;
padding:10px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s,
-webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s,
-o-transform 2s; /* Opera */
}
#transisi2:hover
{
width:150px;
height:150px;
transform:rotate(720deg);
-moz-transform:rotate(720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
}


Efek Transisi pada Warna dan Background


Contoh Elemen yang menggunakan Transisi Warna & Background!

Cara Memanggil-nya : 

<div id="colorbackground">Contoh Elemen yang menggunakan Transisi Warna & Background!</div>

Kode CSS3-nya : 

#colorbackground {
  width:90%;
  background:gray;
  color:black;
  border:2px solid #222;
  padding:15px;
  font:bold 20px Sans-Serif;
  -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;
}
#colorbackground:hover {
  color:white;
  background:black;
}


Sekian Penjelasan Mengenal Efek Transisi CSS3 .. Semoga bermanfaat! #happyblogging sob :)

Source : http://thetutorialblogger.blogspot.com/2012/10/css-transisi.html

Itulah sedikit Artikel Mengenal Efek Transisi / Transition CSS3 terbaru dari kami

Semoga artikel Mengenal Efek Transisi / Transition CSS3 yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Mengenal Efek Transisi / Transition CSS3

Share this