Jumpa lagi ne sama sobat JagoCoding, tutor saya hari ne tentang transisi di CSS3.. Mungkin diantara teman2 pasti ada yang udah tahu tapi masih bingung ataupun kita sudah pernah melihatnya tapi gak tahu koding apa yang  dipakai oleh desainer websitenya untuk membuatnya..

Ok d saya jelasin sedikit dlu, dalam bahasa Indonesia Transisi berarti perpindahan. Perpindahan yang dimaksud disini ialah sesuatu kejadian yang terjadi  baik dari perubahan bentuk,posisi maupun waktu yang akan dipakai untuk perpindahannya.. Sebagai salah satu contoh mungkin teman2 pernah lihat dong animasi yang terjadi di button ataupun mmenu web atau blog, na dasar yang dipakai untuk membuat untuk aniamsinya adalah animasi transisi. Kembali lagi ke topic kita Sesuai standart W3C property transisi ada 4 macam yaitu :

1. transition-property

2. transition-duration

3. transition-timing-function

4. transition-delay

Agar teman2 gak jadi lebih  penasaran kita langsung aja y ke prakteknya..

1. transition-property : perpindahan ini  terjadi di bagian property yang akan dianimasikan. Contoh  Property yang dimaksud bisa merupakan perubahan  width(lebar),height(tinggi),color(warna),background(latar belakang) dll.

Sebagai contoh, buka notepad teman2 kemudian ketikkan kode di bawah ini :

<style>
.contoh-property
{
width:150px;
height:150px;
background: #0003B9;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
color:red;
font:Arial 15px Bold red;
text-align:center;
}
.contoh-property:hover{
width:300px;
}
</style>

Kemudian teman2 ketikan di body kode pemanggil dibawah ini untuk memanggil efek animasinya :

<div class=” contoh-property”>Ini Contoh Animasi Property</div>

Maka didapat hasil ilustrasi sebagai berikut :

Jika ingin lebih memahami lagi property lagi coba teman2 ganti width:300px; tadi menjadi height:300px, kemudian pilih File di Notepad lalu pilih Save. Setelah itu klik kanan di browser kemudian pilih muat ulang atau reload.  Arahkan kembali mouse kearah kotak dan lihat perubahan apa yang terjadi..!!?? Nah bisa diartikan property itu seperti bagian dari objek yang akan dianimasikan..

 2. transition-duration : fungsi dari kode ialahuntuk menentukan kecepatan animasi dalam satuan detik. Nilai yang dipakai di transition-duration ada 2 macam yaitu second(s) ataupun millisecond(ms)..

Sebagai contoh, buka notepad teman2 kemudian ketikkan kode di bawah ini :

<style>
.contoh-duration1
{
width:150px;
height:150px;
background: #0003B9;
transition: width 2s;
duration:5s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari and Chrome */
-o-transition-duration: 5s; /* Opera */
color:red;
font:Arial 15px Bold red;
text-align:center;
}
.contoh-duration2:hover{
width:300px;
}
.contoh-duration2
{
width:150px;
height:150px;
background: #05D400;
transition: width 2s;
duration:0.5ms;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
-moz-transition-duration: 0.5ms; /* Firefox 4 */
-webkit-transition-duration: 0.5ms; /* Safari and Chrome */
-o- transition-duration: 0.5ms; /* Opera */
color:red;
font:Arial 15px Bold red;
text-align:center;
}
.contoh-duration1:hover{
width:300px;
}
</style>

Setelah itu teman2 ketikkan di body kode pemanggil dibawah ini untuk memanggil class kode diatas :

<div class=” contoh-duration1”>Ini Contoh Animasi Duration 1</div>
<div class=” contoh-duration2”>Ini Contoh Animasi Duration 2</div>

Maka didapat hasil ilustrasi sebagai berikut :

Disinilah funsi transiton:duration yang dimaksud., dari kedua kotak diatas tadi terjadi perbedaan kecepatan saat animasi mulai berjalan ketika di hover. Jadi dapat kita simpulkan semakin kecil nilai waktu yang kita msukkan maka semakin cepat animasi yang akan dia kerjakan dalam 1 detik.

3. transition-timing-function : fungsi digunakan untuk efek percepatan animasi. Efek-efek percepatan animasi di bagi menjadi  6 bagian.

- default

- liniear

- ease-in

- ease-out

- ease-ini-out

- cubic-beizer

Untuk contoh percepatan animasi ini teman2 bisa ketikkan kode dibawah ini untuk melihat perbedaan percepatan animasi yang  dijalankan :

<style type="text/css">
#kotak{
padding:.5em 0;
border:1px solid #ccc;
border-left:1em solid green;
border-right:1em solid #006;
background:#eee
}
#kotak .objek{
margin:10px 10px;
width:100px;
border:2px solid;
border-color:green;
background:#cfc;
line-height:40px;
text-align:center;
-webkit-transition-duration:2s;
-moz-transition-duration:2s;
-o-transition-duration:2s;
-ms-transition-duration:2s
}
#kotak:hover .objek{
width:690px;
border-color:#006;background:#ccf;
border-radius:1.5em
}
</style>

Setelah itu teman2 ketikkan di body kode pemanggil dibawah ini untuk melihat perbedaan percepatan animasinya :

<div id="kotak">
<div class="objek">default &raquo;</div>
<div class="objek" style="-webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear;">linear &raquo;</div>
<div class="objek" style="-webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in;">ease-in &raquo;</div>
<div class="objek" style="-webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out;">ease-out &raquo;</div>
<div class="oobjek" style="-webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;">ease-in-out &raquo;</div>
<div class="objek" style="-webkit-transition-timing-function: cubic-bezier(1,0,0,1); -moz-transition-timing-function: cubic-bezier(0,1,1,0); -o-transition-timing-function: cubic-bezier(0,1,1,0);">cubic-bezier &raquo;</div>
</div>

Maka didapat hasil ilustrasi sebagai berikut :

4. transition-delay : dengan funsi maka teman2 bisa menerpakan waktu tunggu sebelum animasi  dijalankan.

Untuk lebih jelasnya teman2 ketikkan kode dibawah ini :

<style>
.contoh-delay
{
width:150px;
height:150px;
background: #0003B9;
transition: width 2s;
delay:5s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
-moz-transition-delay: 5s; /* Firefox 4 */
-webkit-transition-delay: 5s; /* Safari and Chrome */
-o-transition-delay: 5s; /* Opera */

color:red;
font:Arial 15px Bold red;
text-align:center;
}
.contoh-property:hover{
width:300px;
}
</style>

Kemudian teman2 ketikan di body kode pemanggil dibawah ini untuk memanggil efek animasinya :

<div class=” contoh-delay”>Ini Contoh Animasi Delay</div>

Maka didapat hasil ilustrasi sebagai berikut :

Jadi dari ilustrasi diatas maka didapatkan kesimpulan semakin besar waktu delay yang kita masukkan maka animasi akan menunggu selama waktu yang kita masukkan baru kemudian menjalankan animasinya kembali begitu ketika kembali keposisinya semula..

Na jika teman2 ingin menyatukan semua property yang yang telah kita bahas tadi, teman teman bias ketikkan kode di bawah ini sebagai contoh penggabungan property animasi :

<html>
<head>
<style type="text/css"> 
.contoh-animasi-gabungan
{
width:150px;
height:150px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

.contoh-animasi-gabungan:hover
{
width:200px;
}
</style>
</head>
<body>
<div class=” contoh-animasi-gabungan”></div>
<body>
</html>

Simpan dengan nama Animasi Gabungan.html

Yup… Akhirnya tutor harus disini dulu d.. Mudah2n dari penjabaran semua contoh dan pengertian diatas tadi bias membuat teman2 lebih paham dan bias berkreatif. Saya harap tutor ini bias membantu teman2 sekalian dalam mendalami css transisi.. Jika Ada yang kurrang berkenan ataupun teman2 sekalian kurang mengerti bias dikomen lagnsung dibawah ini.. Buat teman2 Yang ingin mendownload file latihan css transisinya bisa langsung menuju link yang sudah saya sediakan dibawah . silahkan teman utak atik sesuai dengan tutor say ini atau bias cari referensi yang lain. Akhir kata  Sampai bertemu lagi di tutor berikutnya dan salam sukses untuk sobat jaco….

DOWNLOD BELAJAR CSS TRANSISI