Tutorial CSS3 Part 6 – Belajar CSS3 Transition

Tutorial CSS3 Part 6 – Belajar CSS3 Transition

Tutorial CSS3 Part 6 – Belajar CSS3 Transition – Sebelumnya di www.malasngoding.com, di tutorial css3 part 5. kita telah belajar tentang tutorial belajar css3 transform. pada tutorial part 5 kita telah belajar beberapa method atau function pada css3 transform. rasanya kurang lengkap dan kurang afdol jika kita hanya menggunakan css3 transform dan tidak menggunakan transition css3. karena transition sudah menjadi tabiat yang tetap dalam membuat efek dengan css3. ibarat nya masih tanggung nih kalo cuma make transform css3. maka di tutorial kali ini kita akan bahas tentang Tutorial CSS3 Part 6 – Belajar CSS3 Transition.

Tutorial Belajar Transition di CSS3

Dengan menggunakan transition atau transisi di css3 ini dapat memungkinkan kita untuk memanipulasi property atau value sebuah element dengan sangat lembut. memberikan durasi dan banyak lagi lainnya kelebihan dan kemudahan transition css3 yang akan teman-teman rasakan sendiri nantinya setelah menggunakan transisi css3 ini. baiklah langsung saja teman-teman simak penjelasan berikut ini tentang transisi css3. Tutorial CSS3 Part 6 – Belajar CSS3 Transition

Ada beberapa perintah css3 transition yang bisa teman-teman coba. di antaranya adalah :

• Transition
  perintah standar transisi css3. biasanya kita gunakan untuk memanipulasi property atau nilai value css dengan sangat baik.
• Transition-delay
  di gunakan untuk memberikan waktu tunda pada saat peng-eksekusian sebuah efek css3.
• Transition-duration
  di gunakan untuuk memberikan waktu durasi terhadap sebuah efek yang kita buat dengan css3.
• Transition-property
  untuk menentukan property css yang akan di gunakan,manipulasi atau lainnya(di pilih).
• Transition-timing-function
  untuk menentukan kecepatan sebuah efek yang kita buat dengan css3.

dari penjelasan singkat di atas tentang pengertian-pengertian perintah transisi css3, akan langsung kita coba cara penggunaanya masing-masing. Tutorial CSS3 Part 6 – Belajar CSS3 Transition

Contoh Penggunaan Dasar Transition css3

Oke sebelum lebih jauh mempelajari css3 transisi, ada baiknya saya berikan contoh dulu tentang penggunaan transition. agar teman-teman bisa lebih mudah mendapatkan bayangan tentang transition css3. cara mikir mudahnya gini teman-teman. misalnya jika transform adalah aksinya, maka transition ini adalah pelembut atau pelancar jalannya transform. seperti pendukung lah bisa di bilang. tapi di sini kita gunakan perintah dasar dulu, jangan transform dulu. Tutorial CSS3 Part 6 – Belajar CSS3 Transition

index.html

style.css

dan jika di jalankan contoh nya seperti berikut ini. coba letakkan cursor mouse di atas kotak.

See the Pen contoh css3 transition by Malas Ngoding (@malasngoding) on CodePen.0

jadi saya jelaskann sedikit. di sini awalnya

pertama nilai width atau lebar pada kotak adalah 100px. dan kita berikan transition untuk property width dengan speed 1 detik.

dan kita berikan hover pada element kotak dengan mengubah lebar kotak menjadi 300px.

jadi dapat di simpulkan di sini adalah dengan transition perubahan lebar pada kotak terjadi dengan lembut dan lebih rapi dan bagus. seperti yang teman-teman lihat pada contoh di atas.

Mengatur Speed pada transition

nah mudah-mudah penjelasan di atas tentang penggunaan dan kegunaan dari transition css3 sudah jelas dan mudah di mengerti oleh teman-teman. jika ada yang belum jelas silahkan teman-teman tanyakan saja di komentar di bawah. Tutorial CSS3 Part 6 – Belajar CSS3 Transition

sesuai dengan yang sudah di jelaskan di atas. untuk mengatur speed transition, kita bisa menggunakan perintah transition-timing-function. dan adapun beberapa value yang bisa di gunakan di antaranya adalah :

• ease – mengatur kecepatan transisi dengan permulaan yang pelan dan di akhirnya juga pelan.
• linear – kecepatan efek tansition/transisi dengan kecepatan yang sama dari awal hingga akhir.
• ease-in – kecepatan efek transisi css3 dengan permulaan yang pelan.
• ease-out – kecepatan efek transisi dengan akhir yang pelan.
• ease-in-out – kecepatan efek transisi dengan akhir dan awal pelan.
• cubic-bezier(n,n,n,n) – kita bisa memberikan nilai pada n untuk menentukan nilai speed transition.

oke langsung kita masuk ke contoh penggunaan transition-timing-function

index.html

transisi.css

belajar css3 transition

See the Pen
css3 transition-timing-function by Malas Ngoding (@malasngoding)
on CodePen.0

Demo

sekian dulu Tutorial CSS3 Part 6 – Belajar CSS3 Transition. semoga bermanfaat.