Web dan Grafis Desain
Author
Sharing is Beautiful.
Kp. Bumi Godean RT.01 RW.06
Wonosobo , Jawa Tengah
56311
Indonesia
alfirous@yahoo.com
081215880929
DOB: 09/03/----
Maaf web sedang dalam perbaikan setelah vakum dalam waktu yang lama.

Efek CSS3 Transition

Efek CSS3 Transition - Dengan CSS3 Transition , kita dapat menambahkan efek ketika mengubah objek dari satu gaya ke yang lain, tanpa menggunakan animasi Flash atau javascripts.
Tanpa Transitions
Pakai Transitions
Untuk membuat efek transition sobat harus menentukan :

  • Property ( All , Background , Color , Weight , Height , Outline )
  • Duration / Durasi ( Second , Millisecond )
  • Function / Fungsi ( Ease , Linear , Ease-In , Ease-Out , Ease-In-Out )
#Demo1{
-webkit-transition: weight 2s ease;
-moz-transition: weight 2s ease;
-o-transition: weight 2s ease;
transition: weight 2s ease;
}
Demo1
#Demo2{
-webkit-transition: background 2s linear;
-moz-transition: background 2s linear;
-o-transition: background 2s linear;
transition: background 2s linear;
}
Demo2


Demo3{
-webkit-transition: color 2s ease-in;
-moz-transition: color 2s ease-in;
-o-transition: color 2s ease-in;
transition: color 2s ease-in;
}
Demo3

Demo4{
-webkit-transition: height 2s ease-out;
-moz-transition: height 2s ease-out;
-o-transition: height 2s ease-out;
transition: height 2s ease-out;
}
Demo4


Demo5{
-webkit-transition: outline 2s ease-in-out;
-moz-transition: outline 2s ease-in-out;
-o-transition: outline 2s ease-in-out;
transition: outline 2s ease-in-out;
}
Demo5



Silahkan berkreasi sesukanya asalkan tata letaknya tetap benar Property → Duration → Function . Cara meletakkannya seperti ini :

Demoku {
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
background:orange;
color:gray;
width:100px;
}
/* beri efek hover */
Demoku:hover {
background:grey;
color:black;
width:200px;
}

Hasilnya
Demoku

Web Support :

  • Mozilla Firefox 4.0+ ( harus menggunakan awalan -moz- )
  • Chrome 3.0+ ( harus menggunakan awalan -webkit- )
  • Safari 3.2+ ( harus menggunakan awalan -webkit- )
  • Opera Mini 10.5+ ( harus menggunakan awalan -o- )
Referensi :
  • http://www.w3schools.com/css3/css3_transitions.asp

151 komentar :

  1. yeahhh, berhasil pertamax juga saya di blog rame ini.. :)

    BalasHapus
  2. telat saya. keduax saja lah. saya baru nyoba menu jquery, gak bisa. apalagi ini, pasti sulit neh

    BalasHapus
  3. takut keburu dingin, amankan yang ke 4 mbah

    BalasHapus
  4. sayang sekali via opera mini efeknya ngak mau muncul :D

    BalasHapus
  5. ya ... tapi transition ini jarang digunakan
    kecuali memang seseorang yang fokus pada detail :P

    BalasHapus
  6. @Share Our Knowledge : selamat pertamaXnya , wah rame dari mana masbro :D

    @rusydi hikmawan : hahaha telat sedikit masbro , ga sulit kok masbro :)

    @gang tutorial : thanks :D

    @Sarang Tekno : opera mini 10keatas muncul kok masbro :/

    BalasHapus
    Balasan
    1. caranya buat kolom balas kek gini gimana?

      Hapus
  7. wkkwkwk,, keren mbah,, bisa manjang gitu,, wakwakwak,, =))

    BalasHapus
  8. wow,panjang amat sob
    kenapa gak sampe stasiun aja hehe....
    jadi ini transisi css

    BalasHapus
  9. Wah,, bagus nih mas bro... saya juga baru belajar buat css. Thanks infonya :D
    Btw thanks juga udah mampir ke blog saya ;)

    BalasHapus
  10. jauh dari pretamax :)) huahahaha

    BalasHapus
  11. wahhh keren keren nih ya efek css3 transisinya :D mantap dah mbah!

    BalasHapus
  12. demo yang kesatu itu nyala atau tidak sob itu?

    BalasHapus
  13. Mantab, Nigh Mbah khirnya Update juga,, Thnkss
    Mas Broth

    BalasHapus
  14. Mantab gan..........izin nyoba gan..........
    dapet tambahan ilmu lagi deh dari sini....thanks gan :)

    BalasHapus
  15. tambah maantaabbss terus kang kreasi2nya... sukses terus buat Blog ini...!!! :D

    BalasHapus
  16. Makin keren aja nih sob tempaltenya dan juga tipsnya

    BalasHapus
  17. Efeknya bisa seperti saat sobat membalas di kotak komentar milik admin ya sob bisa hilang timbul saat di sorot mouse kata-katanya...?

    BalasHapus
  18. @John Terro : tapi ente pake kan :P

    @Rama88 : husss , pikirannya =))

    @Trisna N : capek kalo kepanjangan hehehe ,

    @Uzumaki Lovers : thanks , sep teruskan masbro. sama-sama

    BalasHapus
  19. @Farixsantips : bukan jauh lagi namanya :P , hehehe demo kesatu salah kodenya jadi ga jalan :/

    @Mharjipes Blog : sama-sama , wedew masbrott ??

    @IT-Soft Center : silahkan , semoga bermanfaat

    @Blogger Blegedes : wah biasa-biasa aja , thanks :D

    BalasHapus
  20. @Farixsantips : hahahaha , lagi kesambet apa masbro ? rajin amat =))

    @DODE-XP.COM : hehehe , thanks

    @Si Kambing : harusnya gini "mantap mbekkk" :P

    @cardiacku : alhamdulillah yah :)

    @abufarras : yap bener banget , hampir semua efek hover ane kasih transition

    BalasHapus
  21. wah kren2 efeknya sob,ane suka efek yang demo2 slow2 gimanaaaa gtu hahaha

    BalasHapus
  22. WAh mantap infonya sob, sukses selalu..

    BalasHapus
  23. klo web supportnya semua browser gmn mbah...

    BalasHapus
  24. Nais inpoh Mbah ..
    salam KOPIZINE

    Syndicate-OS

    BalasHapus
  25. Keren Mbah efek CSS3 Transition,lentur kaya karet.ijin menyimak kawan.Makasih happy blogging.

    BalasHapus
  26. Coret-Coret Ah,,

    Kok susah banget sigh dapat Pertamax di Blog ini

    BalasHapus
  27. wih, ada gambar gatot kacanya, hehehe

    BalasHapus
  28. Ke tigapuluh tigax gan. Wkwkwk

    Sayang ane cuma pake operamini 5 jadul gan, efeknya gak keliatan. :D

    BalasHapus
  29. tutorial dari mbah makin mantap aja.jempol pokoknya...=))

    BalasHapus
  30. wah efek transition dari CSS3 yang mantap ne. dari tadi ane mbacanya bolak balik terus supayaa paham,, hehehe thanks berat sob dah dishare

    BalasHapus
  31. tanya sederhana saja sob.

    gimana efek transition ini pada IE sob?

    kan ada :

    -moz : firefox
    -webkit : chrome sama safari
    -o : opera

    gimana dengan IE? :P

    BalasHapus
  32. masih bingung ama yang begituan mabah

    BalasHapus
  33. @Kevin : kalo pada ie pake -ms-transition :)

    BalasHapus
  34. mntapss dehh
    salam kpozine.ane dah lama make ginian

    BalasHapus
  35. wah yg k4 boleh tuh mbah..
    keren keren!!!

    sukses selalu mbah!!

    BalasHapus
  36. awalnay saya pake transisi itu cuman webkit sama moz, tapi lama2 saya pake juga -o- gara2 pengunjung saya banyak juga pake opera :D

    BalasHapus
  37. @Blogcunayz : kalo ente kreasikan pasti lebih keren dari demo diatas :D

    @Ariy Zone : thanks :)

    @NgeCis : yg support cuma browser diatas.

    @Syndicate OS : thanks , salam Kopizine juga :D

    @E'rend : hehehe thanks , happy blogging

    @Mharjipes Blog : jangan coret-coret disini nanti kotor :P , pake mantra kalo mau pertamaX

    BalasHapus
  38. @Enuk Choko' : thanks masbro :D

    @Polbeng Kidz : hehehe cinta indonesia

    @Algo Wijaya : hahaha dihitung segala =)) , di update dong biar keren

    @Ageboy : jangan jempol doang , makanan atau duit hehehe =))

    @Wisata Murah : berarti penjelasan ane kurang jelas dong , sorry ya :D

    BalasHapus
  39. @Kevin : untuk IE ga ada masbro , cek aja di w3schools.com :D

    @giriblogs : sering belajar lama-lama nanti pasti paham.

    @Dode-XP.com : IE untuk transition ga ada masbro :P

    @yangpentingshare : hehehe , pake lagi biar keren. salam kopizine

    @Obat Tradisional Asam Urat : thanks :D

    BalasHapus
  40. hehe.... Nyerah duluan seblum perang wkwk... Msalah css mati kutu sy

    BalasHapus
  41. ya dong rajin :) biar di bales :)) huahaha jadi kenapa demo yang pertama masih di luncurkan?

    BalasHapus
  42. tlg hapus coment sy mbah kbyakan. Neh hp eror neh mf mbah bkan nypam

    BalasHapus
  43. @Katils : hahahaha , jangan mati kutu masbro...hihihi ok deh ane hapus komennya :D

    @Farixsantips : hahahaha =)) tanpa rajin pun ane tetap visit kalo sempat , itu janji setia kita kan :P

    BalasHapus
  44. berkunjung nganter gorengan anget mbah.hehee

    BalasHapus
  45. ahahahahahhaa dulu kok ada sih :v :v :v

    BalasHapus
  46. bukan rajin karena di bales sob -_- salah mengerti sobat. maksudnya bales disini. di postingan.

    BalasHapus
  47. mantap mbah.. Keren di efek CSS..
    Mainin CSS buat styling memang mantap deh..

    Thanks ya sob.. :D

    BalasHapus
  48. @Ladida Cafe : hehehe , kalo ane pake semua masbro . komen masuk spam lagi --'

    @Ageboy : wah ngerepotin thanks ya :D

    @Dode-XP.com : ga ada kok :P

    @Farixsantips : ouhh gitu maksudnya , hehehe :D

    @Admin-Wahid Sahidu : hehehe , biasa aja kali

    @V-MediaKom : thanks masbro :D

    BalasHapus
  49. jujur soba, saya masih gaptek dengan namanya CSS,, hehehhe
    keren banget css transitionnya...

    BalasHapus
  50. ini dia yang selama ini ane cari,
    ketemu juga, emang mantabb tutorialnya mbah Copet......langsung praktek duluah
    nice share...

    BalasHapus
  51. Sip Emang Mbah Qupet :D
    Manteb :D Css-nya :D Nambah Ilmu lagi :D
    Lanjutkan... :D

    BalasHapus
  52. Wuih tambah lama tambah mantebs aja nih tampilannya sob

    BalasHapus
  53. mampir ke mbah gi cari jampi2 yang ampuh nich

    BalasHapus
  54. @Mharjipes Blog : gak tergantung pemakaian yang normal kalo kebanyakan CSS juga pasti berat

    @Asis Sugianto : pelajari terus mabsro , thanks :D

    @zaenal Blog : sip kebetulan , silahkan dicoba. kok mbah copet emangnya ane copet :/ , thanks

    @Bisnis Online Blog : bukannya malah tambah jelek ?? :D

    @gang tutorial : hehehe , semoga nemu :)

    BalasHapus
  55. dah nyoba dan ngutak-atik blom berhasil nih....
    kyaknya ane gak pas naro kodenya ni mbh Copet...
    kasih pencerahan dong kalo kode yang bisa manjang (apa tu panjang2??)buat menu di blog ane? thanks....

    BalasHapus
  56. ane lihat arsip yang home page keren tu klau CSSnya di bagi. hehehe clamitan dot com.hahaha

    BalasHapus
  57. wowww efek yg indah dan keren,,, :)

    BalasHapus
  58. wach,keren nih sobat tips tips nya,bakal sering maen kesini ni,,

    BalasHapus
  59. Masuk kantong bookmark. Memang CS3 mengagumkan. Nice share and happy blogging

    BalasHapus
  60. yakhhh,,saya kok gak berhasil ya,,hemmh,,,gagal nih gan,,kenapa ya...

    BalasHapus
  61. yakhhh,,saya kok gak berhasil ya,,hemmh,,,gagal nih gan,,kenapa ya...

    BalasHapus
  62. =)) pada bagus2 designnya ya skrg,, :( tinggal ane yg jadul.. :((

    BalasHapus
  63. @zaenal Blog : add facebook ane biar gampang masbro :D , itu cuma widthnya di besarin pas hover =))

    @Wisata Murah : hehehe sayang sekali ga bisa masbro , barang pribadi itu :D

    @anisayu : thanks mbak :)

    BalasHapus
  64. @bunggsu : thanks , silahkan main kapan saja :D

    @Iskaruji dot com : emang nggak bikin penuh masbro ? . thanks :D

    @Cara Mengobati Penyakit Asam Urat : mungkin ,salah penempatan kode masbro :)

    @Rama88 : hahahaha =)) , makanya buruan ganti design :P

    BalasHapus
  65. keren banget mbah.. hehe, boleh deh ni dicoba :D

    BalasHapus
  66. Nice post sob...ditunggu kunjungan baliknya.. :D

    BalasHapus
  67. wehhh keren mbah, koleksi css3 nya bnyak jg, kya blognya kang farixtips bnyk tutorial css3

    BalasHapus
  68. Balik lagi masbro sukses selalu

    BalasHapus
  69. blognya makin keren gan setelah lama tidak berkunjung di mari

    BalasHapus
  70. datang dan berkunjung ke tempat/singgahsana/sarang/penginapan/pangkalan/rumah/markas mbah qopet ini :))

    BalasHapus
  71. ye ye la la la..
    hduh, sob kalo masalah efek2 pke css blum terlalu bisa saia..
    but thx for share.. :)

    BalasHapus
  72. wow, blognya mbah Qopet keren euy!
    kunjungan pertamaku nih mbah... salam ya..
    :)

    BalasHapus
  73. mbak makin ok ajah blognya
    Sukses terus ya mbahhh

    BalasHapus
  74. wah ini yg ane cari, thx for info :D

    BalasHapus
  75. mantap sekali blogya... saya ke warnet ne...

    BalasHapus
  76. Blog ini juga menggunakan efek translation ya? keren efeknya.

    BalasHapus
  77. wah tambah keren aja neh blog :3
    oke mbah langsung ane praktekin, ,

    BalasHapus
  78. MAkin ajib aja nih Blog n trik dari Mbah Qupets :D
    Sukses slalu :D

    BalasHapus
  79. demo nya yg dimaksud kok tdk kliatan ya gbrnya atau koneksi saya yg lelet kali nih,,,

    BalasHapus
  80. Woww.. MANTAAFF BGT tuh Mbah!!
    kalo pake efek Transition ini emang kliatan lembut.. kayak JQUERY gitu..
    Ayas ijin Bookmark dulu neh Mbah..buat Ayas pelajari lgi..
    MAKASI BGT yach Mbah!!

    BalasHapus
  81. Keren ternyata ada updatean disini

    BalasHapus
  82. Blogwalking :D, Kunjungi balik dan kasih komentar ya sob! :D

    BalasHapus
  83. IJin ngomenin pengunjung Sob FAris :D
    Official Blog : Oagah ah.... Wkkkkk =)) Piece :D Ngak2 Bercanda :D Kunjungi blog saya juga :D ntar ane komen kayak kereta :D :D :D

    BalasHapus
  84. Kunjung lagi ah....masih penasaran ama Css3 nih :D

    BalasHapus
  85. mana neh updet terbarunya mbah jambrong :v

    BalasHapus
  86. datang lagi meramaikan blog sobat...

    BalasHapus
  87. wuaahahaha..pertamaxs sob dari bawah...
    Nice post sob,..tapi demonnya kok gak bisa tuh sob

    BalasHapus
  88. jadi gak bisa kesmua browser dunk...

    BalasHapus
  89. makin rame aja disini,,malam sobatku

    BalasHapus
  90. ye keseratus wkwkwkwkwkwwkwkk =))

    BalasHapus
  91. Mbah.. mbah..
    mau tanya.. pekerjaan yang tepat untuk saya apa ya mbah... :D

    BalasHapus
  92. mampir di mari mencari makan :D

    BalasHapus
  93. wah tutorial keren dari mbah qopet nie...boleh dunk 1 template buat q? :D

    BalasHapus
  94. wow tutorial yang keren kawan, trimakasih sudah berbagi :-)

    BalasHapus
  95. wiiih.... keren juga. aku br tau ada transisi kayak gitu (gaptek CSS) lol
    makasih sharingnya

    BalasHapus
  96. support dsni gan...
    tq2..
    salam :)

    BalasHapus
  97. Hadir lagi Mbah :D
    Masih Ulangan ya,kok lum bikin update :D
    T4 dah nimbrung nih.. :D

    BalasHapus
  98. keseratus sepuluh! wkwkwkwkwkwkwkwwkwk =))

    BalasHapus
  99. wahhhh makin ramai saja nih di blognya mbah qopet :D huahahhaa macnpca! mancap!

    BalasHapus
  100. sembari nunggu tips berikutnya mending kita nongkrong disini dolo

    BalasHapus
  101. selamat pagi sob..
    mampir lagi dimari,, ikut ngramein suasana..:)

    BalasHapus
  102. keren bgt nih template gilaa abis hahaha..nice tutorial bro..

    BalasHapus
  103. berkunjung sahabat lagi disini..:)

    BalasHapus
  104. bagus mbah ... thanks tutorialnya ...

    BalasHapus
  105. kayanya ribet banget ya mbah tapi pengen nyoba ni makasih infonya

    BalasHapus
  106. hadir lagi menyapa di Jumat barokah :-)

    BalasHapus
  107. efek ease bikin mesra; seneng nontonin doang :D
    makasih tipsnya
    oiya lupa .. pertamaaaax (dari belakang) =))

    BalasHapus
  108. Wah makin keren :D blognya di tambah tutor2 css :D jd pengin :D

    BalasHapus
  109. kunjungan lagi sob kesini sembari mencari alamat persahabatan (bukan alamat palsu) huahaha

    BalasHapus
  110. mampir kesini sambil nyari ilmu, ditnggu tutorial barunya.

    BalasHapus
  111. makin ramai aja disini,
    ikutan ahh

    BalasHapus
  112. tar ane coba2 bereksperimen ah dengan efek ini,...

    BalasHapus
  113. Bikin efek2 mah susah :D Enak mah di kasih Tempalte Blog yang ada effect2nya n Gratis :D

    BalasHapus
  114. keren :D
    saya mau eksperimen dulu :D

    BalasHapus
  115. wahahaha.......lagi-lagi efek css3 bermunculan kembali..

    BalasHapus
  116. kunjungan kesini lagi bro sembari menunggu postingan terbarunya ente nih :)

    BalasHapus
  117. ikut meramaikan acarnya disini

    BalasHapus
  118. @All Thanks for visiT semoga makin pinter dan sehat selalu :D . Untuk yang baru kenal salam kenal dan untuk yang sudah kenal :) salam tempel =))

    BalasHapus
  119. semua demonya tampak kelihatan sama gan aneh eheheh....

    BalasHapus
  120. Bagi Master" CSS

    Ini Ada Widget Untuk Mengcompress Kode CSS

    Mau Kan?

    Mau Donk!!

    Harus!!

    http://tentangduniadanweb.blogspot.com/2011/12/teduweb-css-compressor.html

    CSS

    BalasHapus
  121. Efek CSS3 Transition, demonya yang mana bang?

    weww kenapa nih blognya lagi ada perbaikan yahh

    BalasHapus
  122. siipp degh Mba ane selalu setia ama Tricknya

    Update dong blognya!

    BalasHapus
  123. kok sama saja ya bro? saya pakai browser chrome.

    BalasHapus
  124. wih, ada gambar gatot kacanya, hehehe

    BalasHapus
  125. nyimak aja deh sobat, CSS aja saya ngga ngerti haha, apalagi kode-kode diatas itu..

    BalasHapus
  126. Sip mantap-mantap meskipun sedikit susah tapi akan saya coba berexperimen soalnya ni lagi niat banget belajar CSS

    BalasHapus
  127. mantab

    bio-sanjaya.blogspot.com/2012/01/alexa-rank-no-data-no-data.html

    BalasHapus
  128. Siap untuk uji coba otak atik css
    thank's sob........

    BalasHapus
  129. makasih banyak ya gan atas infonya

    BalasHapus
  130. thank banget ya ilmunya berguna sekali nih

    BalasHapus

Anda dapat berkomentar terkait artikel diatas dan isi komentar sepenuhnya menjadi tanggung jawab komentator.

Dilarang berkomentar dengan tidak sopan, kasar, berisi fitnah, berbau SARA, SPAM dan OOT. Setiap komentar yang masuk akan dimoderasi dan akan diterbitkan jika sesuai dengan ketentuan yang berlaku.