Belajar css3 transition

belajar css

CSS3 transition

Pada CSS3 terdapat fitur baru yaitu property transition. Property ini berguna untuk menghasilkan transisi pada elemen. Sebagai contoh disaat Anda mengubah warna latar belakang dengan mouse hover. Dalam skenario normal, warna latar belakang berubah langsung dari nilai property lama ke nilai property baru pada saat Anda meletakkan kursor di atas elemen tersebut.

Anda bisa mengontrol transisi seperti mengatur delay transisi, durasi pada transisi, timing atau waktu pada tansisi dan multiple transisi.

Transition-property

Property transition-property digunakan untuk menentukan nama property css mana yang akan digunakan untuk membuat sebuah transisi. Untuk membuat transisi bekerja, Anda harus menentukan setidaknya dua property pada transisi, yaitu property transition-property dan transition-duration.

Pada artikel dibawah ini Anda akan belajar property transition-duration.

Transition-duration

Dengan property transition-duration Anda bisa menggunakannya untuk menentukan berapa detik atau milidetik yang diperlukan untuk menyelesaikan efek transisi ( 5s untuk 5 detik dan 0.5 untuk 0,5 milidetik ).

Contoh:

Editor Online
  1. #transisi {
  2. width: 150px;
  3. height: 100px;
  4. background: blue;
  5. transition-property: width;
  6. transition-duration: 5s;
  7. }
  8. #transisi:hover {
  9. width: 300px;
  10. }

Agar transisi bekerja, Anda harus menentukan setidaknya dua property pada transisi, yaitu property transition-property dan transition-duration.

Transition-delay

Dengan property transition-delay Anda bisa menggunakannya untuk menentukan berapa detik atau milidetik yang diperlukan untuk penundaan efek transisi ( 5s untuk 5 detik dan 0.5 untuk 0,5 milidetik ).

Contoh:

Editor Online
  1. #transisi {
  2. width: 150px;
  3. height: 100px;
  4. background: blue;
  5. transition-property: width;
  6. transition-duration: 5s;
  7. transition-delay: 2s;
  8. }
  9. #transisi:hover {
  10. width: 300px;
  11. }

Transition-timing-function

Dengan property transition-timing-function Anda bisa menggunakannya untuk menentukan kurva kecepatan efek transisi.

Property transition-timing-function dapat memiliki nilai berikut:

  • ease – menentukan efek transisi dengan awal yang lambat, kemudian cepat, kemudian berakhir perlahan (ini adalah default)
  • linear – menentukan efek transisi dengan kecepatan yang sama dari awal sampai akhir
  • ease-in – menentukan efek transisi dengan awal yang lambat
  • ease-out – menentukan efek transisi dengan akhir yang lambat
  • ease-in-out – menentukan efek transisi dengan awal dan akhir yang lambat
  • cubic-bezier(n,n,n,n) – memungkinkan Anda menentukan nilai-nilai Anda sendiri dalam fungsi kubik-bezier

Contoh:

Editor Online
  1. div {
  2. width: 150px;
  3. height: 100px;
  4. background: yellow;
  5. border: 1px solid #aaa;
  6. margin-bottom: 15px;
  7. transition-property: width;
  8. transition-duration: 2s;
  9. }
  10. #linear {
  11. transition-timing-function: linear;
  12. }
  13. #ease {
  14. transition-timing-function: ease;
  15. }
  16. #ease-in {
  17. transition-timing-function: ease-in;
  18. }
  19. #ease-out {
  20. transition-timing-function: ease-out;
  21. }
  22. #ease-in-out {
  23. transition-timing-function: ease-in-out;
  24. }
  25. div:hover {
  26. width: 300px;
  27. }

Transition shorthand

Dengan transition shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua property transition dalam satu property tunggal. Untuk menggunakan transition shorthand Anda cukup menggunakan property transition. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti contoh-contoh diatas.

Property transition shorthand berlaku untuk transition dibawah ini:

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

transition: property / duration / timing-function / delay;

Contoh:

Editor Online
  1. #transisi {
  2. width: 150px;
  3. height: 120px;
  4. background: blue;
  5. transition: width 2s 1s, transform 2s 1s;
  6. }
  7. #transisi:hover {
  8. width: 250px;
  9. transform: translate(50px, 100px);
  10. }

Transition multi

Mungkin Anda ingin membuat sebuah efek transisi lebih dari satu. Agar kode Anda menjadi lebih pendek Anda bisa membuat efek transisi digabungkan langsung dengan cara dipisahkan koma.

Contoh:

Editor Online
  1. #transisi {
  2. width: 150px;
  3. height: 100px;
  4. background: blue;
  5. transition-property: width, background;
  6. transition-duration: 3s;
  7. }
  8. #transisi:hover {
  9. width: 300px;
  10. background: yellow;
  11. }

Daftar property CSS3 transition

PropertyKegunaanya
transition-propertyMenentukan nama property CSS untuk efek transisi
transition-durationMenentukan berapa detik atau milidetik yang diperlukan untuk menyelesaikan efek transisi
transition-delayMenentukan penundaan (dalam detik atau milidetik) untuk efek transisi
transition-timing-functionMenentukan kurva kecepatan efek transisi
transitionProperty singkatan untuk mengatur semua property transisi menjadi property tunggal

Leave a Reply

Your email address will not be published. Required fields are marked *