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:
    740
    Likes Received:
    52
    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