CSS - Transisi

Hai semuanya. Dalam materi kali ini kita akan berbicara tentang CSS transisi. Pernahkan anda melihat suatu tombol atau elemen yang berbeda pada laman web saat kita dapat mengubah posisinya? Link berubah dari link biasa menjadi link sudah terkunjungi (terklik)? Atau pernh lihat animasi yang terjadi di button ataupun menu laman web, sebenarnya animasi yang dipakai untuk membuat itu adalah animasi transisi. Jadi CSS transisi memungkinkan Anda untuk mengubah nilai properti dari satu nilai yang lain, selama durasi tertentu. Seperti ketikaa Anda mengarahkan kursor ke suatu link, anda dapat mengubah warnanya.

Ketika Anda membuat laman web, anda bisa sedikit memberikan style keren yang Anda inginkan, untuk menunjukkan bahwa Anda benar-benar mulai memahami konsep-konsep ini. Properti Transisi ini mempunyai 4 type:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Adapun efek Transisi kadang tidak berjalan sempurna di browser seperti, Chrome, Firefox 4, Opera, IE, dan Safari atau bisa disebut juga dengan istilah Cross Browser. Maka kit harus menambahkan yang namanya pre-fix atau fungsi tambahan pada CSS Transisi, seperti :

<html>
<head>
    <style>
        body {background-color: #233645;}
#wrapper a:hover .box img,
#wrapper a:focus .box img {
    opacity: 0.8;
    outline: #fff solid 2px;
    outline-offset: -15px;
}
#wrapper h1, .effect {
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;  
    transition: all .7s ease;
}
.box {
    width: 600px;
    position: relative;
    background: yellow;
}
#wrapper {
    width: 600px;
    margin: auto;
    padding: 10px;
}
.box img {
    width: 600px;
    outline: transparent solid 2px;
    outline-offset: 0px;
}
.box h1 {
    font-size: 18px;
    position: absolute;
    color:#fff;
    text-transform: uppercase;
    position: absolute;
    top:40%;
    left:0;
    right:0;
    text-align: center;
    opacity: 0;
}
#wrapper a:hover .box h1,
#wrapper a:focus .box h1 {opacity: 1;}
     </style>
</head>


<body>
    <div id="wrapper">
        <a href="#">
            <div class="box">
                <img class="effect" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQez9qTMxQpskwWAgF6WMQMB-QTbyH_BGeIr4CbQFlOPrtKhEu_5g">
                <h1>Contoh transition-property Pada Chrome, firefox, opera</h1>
            </div>
        </a>
    </div>
</body>

</html>  
  • Chrome dan Safari : -webkit-
  • Firefox 4 : -moz-
  • Opera : -o-
  • IE : -ms-

Pada transition-property. Apa yang ingin Anda ubah? Ingin mengubah ukurannya, warna, posisi, semuanya? Jadi maksud dari transisi ini, perpindahan terjadi pada bagian property yang akan dianimasikan baik width(lebar), height(tinggi), color(warna), background(latar belakang).

Perhatikan contoh beirikut:

Hasilnya :

transisi1

Ketika cursor diarahkan di image, maka title gambar akan muncul. Transisi ini bisa juga berfungsi di chrome, firefox dan opera.

Lantas bagaimana dengan transition-duration? Berapa lama setiap transisi bertahan dan kenapa bisa terjadi dengan sangat cepat, di mana orang hampir tidak menyadarinya, atau bisa sangat panjang dan tertarik.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: width; /* Safari */
    -webkit-transition-duration: 5s; /* Safari */
    transition-property: width;
    transition-duration: 5s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>
<h1>Contoh transition-duration</h1>

<p>Arahkan kursor ke elemen div di bawah ini, untuk melihat efek transisi (efek transisi akan berlangsung selama 5 detik)</p>

<div></div>


</body>
</html>

Saat kursor mau diarahkan ke elemen, default gambar seperti ini:

Hasilnya :

transisi2

Saat kursor sudah diarahkan ke elemen, efek memanjang sampai 300px selama 5 detik.

transition-timing-function, Jika Anda akan membuat sesuatu yang lebih besar, apakah Anda ingin membuatnya perlahan-lahan lebih besar dan linear semua pada saat yang sama atau apakah Anda ingin memudahkan atau mempermudah? Anda benar-benar dapat mengubah caranya? Jadi fungsi dari transisi ini adalah digunakan pada efek percepatan animasi. Efek-efek percepatan animasi di bagi menjadi 6 bagian.

  • default
  • liniear
  • ease-in
  • ease-out
  • ease-ini-out
  • cubic-beizer
<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 250px; height:125px;
    background: blue;
    -webkit-transition: width 2s; /* Safari */
    -webkit-transition-timing-function: ease-in; /* Safari */
    transition: width 2s;
    transition-timing-function: ease-in;
}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>


 <div>
  <div class="box">Red</div>
</div>



</body>
</html>

Hasilnya :

transisi4

transition-delay, disini transisi-nya membuat browser menunggu sesuai value yang dimasukkan sebelum mulai bertransisi? Jika seseorang melakukan hover mengarahkan kursor misalnya, apakah Anda menginginkannya mengarahkan kursor selama dua detik sebelum Anda melanjutkan? Jadi properti ini akan menetapkan penundaan (dalam detik) untuk efek transisi.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-transition: width 3s,background-color 5s; /* Safari */
    -webkit-transition-delay: 2s; /* Safari */
    transition: width width 3s,background-color 5s;
    transition-delay: 2s;
}

div:hover {
    width: 400px;
    background-color: green;
}
</style>
</head>
<body>



<div>saat anda arahkan kursor terjadi delay</div>

</body>
</html>

Hasilnya :

transisi5

Jika Anda ingin menggunakan transisi, hal pertama yang perlu Anda lakukan tentukan elemen Anda dan katakan style apa yang Anda inginkan ketika pertama kali memuat halaman. Selanjutnya, Anda ingin memilih yang mana elemen yang ingin Anda transisi. Jadi Anda mungkin menata itu dengan latar belakang warna, warna, lebar, dan tinggi. Anda tidak perlu melakukan untuk mengubah semua elemen ketika Anda masuk ke dalam transisi. Jadi pilih yang memang Anda ingin berubah. Kemudian tentukan nilai baru untuk elemen-elemen itu. Anda juga bisa menggabungkan ini dengan materi pseudo class, penggunaan hover atau focus sangat dibutuhkan dalam materi ini. Jadi mari praktek beberapa kode kemudian jalankan ide anda disana.