Tipe – tipe percepatan CSS Transisi Dan Penerapannya
Di pada CSS dikenal dengan banyak ragam manfaat, karena dengan CSS kita mampu mengimplementasikan bermacam-macam animasi layaknya kita bermain javascript jquery, namun segala itu tetap ada batasan – batasanya tak seperti di javascript jquery yang memang lebih ke animasi pada situs. Bagi CSS transisi lebih mengarah di efek – efek hover.
bagi sintaks CSS transisi sendiri penulisannya adlah selaku berikut
transition: nama_properti durasi tipe_percepatan delay;
nama_properti ; bagi jenis animasinya
durasi; bagi menentukan waktu berjalannya animasi,
tipe_percepatan; efek – efek percerpatan yang akan diraih dalam kurun waktu proses hover
delay; waktu jeda animasi.
Oke di kesemapatan kali ini saya akan membahas mengenai Tipe – tipe percepatan CSS Transisi Dan Penerapannya,
percepatan CSS transisi sendiri terdiri dari beberapa bagian diantaranya sebagi berikut;
- default (berjalan tanpa efek)
- linear (manfaat percepatan dengan yang sama dari awal hingga ahir)
- ease (manfaat percepatan dengan nilai awal yang pelan dan dengan ahir yang pelan pun )
- ease-in ( manfaat percepatan bagi mengatur permulaan dengan nilai pelan )
- ease-out ( manfaat percepatan kebalikan dari ease in )
- ease-in-out ( manfaat percepatan gabungan dari ease in dan ease out dengan awal pelan dan ahir pelan )
- cubic-bezier ( di manfaat ini kita dapat mengatur nilai percepatannya (0,0,0,0) )
Oke lumayan gampang dipaham bukan, sekiranya masih bingung tenanga saja saya memberikan sebuah penerapannya, Oke seketika saja silahkan lihat script di bawah ini dan copy script di bawah ini bagi 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 telah silahkan sisipakan manfaat CSS di bawah ini bagi mengatur manfaat percepatan dan file HTML yang kita bikin tadi,
kalau telah silahkan save dan jalankan di 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>
Kalau script di atas di jalankan karenanya hasilnya akan seperti gambar di bawah ini;
Dan ketika kursur menimpa bagian atas nya karenanya hasilnya gambar akan beregerak dari sampin kiri ke samping kanan sejauh 81% seperti gambar di bawah ini;
Oke lumayan gampang bukan nantiakn artikel – artikel saya berikutnya dan masih banyak banyak lagi dengan CSS transisi yang dapat kita bikin tak cuman contoh di atas saja, semoga bermanfaat, salam koding rekan-rekan programer semoga berkah.
Sumber https://kursuswebsite.org
