Iklan AdCombo
  1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

Tentang TRANSITION CSS

Discussion in 'Pemrograman Web' started by refi ridho, Feb 8, 2013.

Tags:
  1. refi ridho

    refi ridho New Comer

    Joined:
    Aug 10, 2012
    Messages:
    36
    Likes Received:
    0
    Location:
    kediri
    Hay kakak" senior programer..
    aku mau tanya nie tentang TRANSITION. . .

    misalnya gni kk :
    ====================================================================
    #spa
    {
    width: 200px;
    height: 300px;
    background-color: red;

    }
    #spa:hover
    {
    transition-timing-function: ease-in-out;
    transition-property: width;
    transition-duration: 2s;
    width: 400px;
    height: 500px;
    }
    ====================================================================

    lah waktu di running itu width-nya udah sesuai dengan duration,,
    tapi pas heightnya kok gak bisa seperti width ya??
    kok cepet bngt jalannya ga sesuai dengan duration . . .

    mohon pencerahannya kk . .
    makasih . . . .

    catatan: itu saaya jalankan pake firefox
     
  2. nekaters

    nekaters Hero

    Joined:
    Aug 12, 2012
    Messages:
    682
    Likes Received:
    31
    Location:
    Yogyakarta
    wah ane malah blm tau ini, maklum cuma coding pake hp,
    btw itu kok gak ada transition-property: height; ?
    ikut nyimak buat belajar
     
  3. evo3cx

    evo3cx AdSense Fan

    Joined:
    Jun 7, 2010
    Messages:
    145
    Likes Received:
    7
    Location:
    DEPOK , JAWA BARAT
    transition-timing-function:ease-in-out; coba gan di ganti ganti valuenya,,
     
  4. be4rt

    be4rt Hero

    Joined:
    Sep 17, 2010
    Messages:
    739
    Likes Received:
    51
    Location:
    sekitar sini aja
    coba pake ini

    Code:
    #spa
    {
    width: 200px;
    height: 300px;
    background-color: red;
    -webkit-transition-duration: .7s; 
    -moz-transition-duration: .7s; 
    -o-transition-duration: .7s;
    }
    #spa:hover
    {
    width: 400px;
    height: 600px;
    }
    maaf klo kliru soalnya ga paham yg di tanyain, kali aja gitu maksudnya, tp ane bukan programer
     
    refi ridho likes this.
  5. mp3online

    mp3online Super Hero

    Joined:
    Jul 19, 2011
    Messages:
    2,240
    Likes Received:
    295
    Location:
    jakarta
    cuma bisa ngasih referensi
    hxxp://www.w3schools.com/css3/css3_transitions.asp

    aku blm pernah makai css kayak gitu, jd blm paham. :)
     
  6. ladidanation

    ladidanation Banned

    Joined:
    Nov 3, 2012
    Messages:
    336
    Likes Received:
    63
    Location:
    Pati, Indonesia
    dicoba dulu yak :)


    #spa{-webkit-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-o-transition:all 2s ease-in-out;background:red;width:200px;height:300px}
    #spa:hover{width:400px;height:500px}
     
    refi ridho likes this.
  7. xwisnux

    xwisnux New Comer

    Joined:
    Dec 15, 2010
    Messages:
    20
    Likes Received:
    1
    Yup bener gan, yang dikasih transition id "aslinya" bukan hovernya :senyum:
     
    refi ridho likes this.
  8. refi ridho

    refi ridho New Comer

    Joined:
    Aug 10, 2012
    Messages:
    36
    Likes Received:
    0
    Location:
    kediri
    MantaB gan... Makasih yya,,, emank itu yang aku maksud :D
     
  9. refi ridho

    refi ridho New Comer

    Joined:
    Aug 10, 2012
    Messages:
    36
    Likes Received:
    0
    Location:
    kediri
    Mantab . . . Sipp dah...
    matur Nuwun O:-)
     
  10. jasperson

    jasperson AdSense Starter

    Joined:
    Jun 16, 2013
    Messages:
    98
    Likes Received:
    3
    Location:
    Padang Sidempuan
    transition gak support ie 8 kebawah
     
  11. mp3online

    mp3online Super Hero

    Joined:
    Jul 19, 2011
    Messages:
    2,240
    Likes Received:
    295
    Location:
    jakarta
    hari gini masih pake ie? :D
    tapi emang sih, sbg web developer kita kalau bisa hrs mengoptimasi tampilan di semua browser, termasuk ie & beberapa browser hp.
    tp kalau gak ada yg suport untuk ie ya tinggalin aja.
    kasih aja tulisan best view with firefox & chrome biar visitor yg gak tau browser firefox & chrome jadi tau kalau browser gak cuma ie :D
     
  12. nasdin

    nasdin Super Hero

    Joined:
    May 28, 2013
    Messages:
    821
    Likes Received:
    182
    IE, meskipun trendnya makin menurun tergantikan oleh chrome, untuk desktop browser IE masih punya market share lebih dari 30% di USA

    _https://www.google.com/search?hl=en&gl=us&num=20&oe=utf-8&q=internet+explorer+usa+market+share
     
  13. widi 980

    widi 980 AdSense Fan

    Joined:
    Jun 24, 2013
    Messages:
    201
    Likes Received:
    23
    Location:
    Di hatinya VE
    bener kaya gini gan, di modif dikit jadi :
    Code:
    #spa{
        width: 200px;
        height: 300px;
        background-color: red;
        -webkit-transition-duration: .7s; 
        -moz-transition-duration: .7s; 
        -o-transition-duration: .7s;
    }
    #spa:hover{
        width: 400px;
        height: 500px;
        -webkit-transition-duration: .7s; 
        -moz-transition-duration: .7s; 
        -o-transition-duration: .7s;
    }
    
    yang bikin hightny gak bisa transition karena tag ini gan :
    Code:
    transition-property: width;
    
    sebagai tambahan aja gan :D
     

Share This Page