Di dalam CSS dikenal dengan banyak ragam fungsi, karena dengan CSS kita mampu mengimplementasikan berbagai animasi layaknya kita bermain javascript jquery, namun semua itu tetap ada batasan – batasanya tidak seperti di javascript jquery yang memang lebih ke animasi dalam website. Untuk CSS transisi lebih mengarah pada efek – efek hover.
untuk sintaks CSS transisi sendiri penulisannya adlah sebagai berikut
transition: nama_properti durasi tipe_percepatan delay;
nama_properti ; untuk jenis animasinya
durasi; untuk menentukan waktu berjalannya animasi,
tipe_percepatan; efek – efek percerpatan yang akan dihasilkan selama proses hover
delay; waktu jeda animasi.
Oke pada kesemapatan kali ini saya akan membahas tentang Tipe – tipe percepatan CSS Transisi Dan Penerapannya,
percepatan CSS transisi sendiri terdiri dari beberapa bagian diantaranya sebagi berikut;
- default (berjalan tanpa efek)
- linear (fungsi percepatan dengan yang sama dari awal hingga akhir)
- ease (fungsi percepatan dengan nilai awal yang pelan dan dengan akhir yang pelan juga )
- ease-in ( fungsi percepatan untuk mengatur permulaan dengan nilai pelan )
- ease-out ( fungsi percepatan kebalikan dari ease in )
- ease-in-out ( fungsi percepatan gabungan dari ease in dan ease out dengan awal pelan dan akhir pelan )
- cubic-bezier ( pada fungsi ini kita bisa mengatur nilai percepatannya (0,0,0,0) )
Oke cukup mudah dipaham bukan, jika masih bingung tenanga saja saya memberikan sebuah penerapannya, Oke langsung saja silahkan lihat script di bawah ini dan copy script di bawah ini untuk melihat hasilnya.
<html>
<head>
<title>perkenalan css transisi</title>
</head>
<body>
<div id="box">
<div class="unixmamen" style="-moz-transition-timing-function: default; -ms-transition-timing-function: default; -o-transition-timing-function: default; -webkit-transition-timing-function: default; transition-timing-function: default;">default</div>
<div class="unixmamen" style="-moz-transition-timing-function: linear; -ms-transition-timing-function: linear; -o-transition-timing-function: linear; -webkit-transition-timing-function: linear; transition-timing-function: linear;">linear</div>
<div class="unixmamen" style="-moz-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in;">ease-in</div>
<div class="unixmamen" style="-moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;">ease-out</div>
<div class="unixmamen" style="-moz-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;">ease-in-out</div>
<div class="unixmamen" style="-moz-transition-timing-function: cubic-bezier(0,1,1,0); -ms-transition-timing-function: cubic-bezier(0,1,1,0); -o-transition-timing-function: cubic-bezier(0,1,1,0); -webkit-transition-timing-function: cubic-bezier(0,1,1,0); transition-timing-function: cubic-bezier(0,1,1,0);">cubic-bezier</div>
<div class="unixmamen" style="-moz-transition-timing-function: cubic-bezier(1,0,0,1); -ms-transition-timing-function: cubic-bezier(1,0,0,1); -o-transition-timing-function: cubic-bezier(1,0,0,1); -webkit-transition-timing-function: cubic-bezier(1,0,0,1); transition-timing-function: cubic-bezier(1,0,0,1);">cubic-bezier</div>
</div>
</body>
</html>
kalau sudah silahkan sisipakan fungsi CSS di bawah ini untuk mengatur fungsi percepatan dan file HTML yang kita buat tadi,
kalau sudah silahkan save dan jalankan pada browsernya!
<style>
#box {
border-left: 4px solid #000;
}
.unixmamen {
background: green;
font-size: 12px;
color: #fff;
padding: 10px 20px;
width: 130px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
-moz-transition-property: all;
-moz-transition-duration: 5s;
-ms-transition-property: all;
-ms-transition-duration: 2s;
-o-transition-property: all;
-o-transition-duration: 5s;
transition-property: all;
transition-duration: 2s;<br> margin-bottom:10px;
}
#box:hover .unixmamen {
margin-left: 81%;
background: purple;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#box:hover {
border-right: 4px dotted #000;
margin-right: 32%;
border-left:4px dotted #000;
background:pink;
}
</style>
Jika script di atas di jalankan maka hasilnya akan seperti gambar di bawah ini;
Dan ketika kursur menimpa bagian atas nya maka hasilnya gambar akan beregerak dari sampin kiri ke samping kanan sejauh 81% seperti gambar di bawah ini;
Oke cukup mudah bukan nantiakn artikel – artikel saya selanjutnya dan masih banyak banyak lagi dengan CSS transisi yang dapat kita buat tidak cuman contoh di atas saja, semoga bermanfaat, salam koding sahabat programer semoga berkah.
The post Tipe – tipe percepatan CSS Transisi Dan Penerapannya appeared first on Kursus Website Terbaik.