#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    965
    Rep Power
    11

    Animation not working


    Hi,

    I have this CSS which slides away two divs like curtains. It works in IE and FF, but not in Safari or Chrome.

    Any ideas why?

    PHP Code:
    input[type="checkbox"] {
      
    backgroundrgba(255,255,255,.1);
      
    border-radius100%;
      
    border0;
      
    cursorpointer;
      
    text-aligncenter;
      
    positionabsolute;
      
    top5px;
      
    left45.2%;
      
    margin-left: -20px;
      
    width200px;
      
    height200px;
      
    opacity:0.4;
      
    /*filter:alpha(opacity=40); /* For IE8 and earlier */
     /* outline:0;*/
      
    transitionall 0.4s ease-in-out;
      -
    webkit-transitionall 0.4s ease-in-out;

    }

    input[type="checkbox"]:hover {
      
    backgroundrgba(180,0,0,1);
    }

    input[type="checkbox"]:after {
      
    color#fff;
      
    content'+';
      
    font-size2em;
      
    line-height41px;
      
    width100%;
      
    height100%;
    }

    input[type="checkbox"]:checked {
      
    backgroundrgba(180,0,0,1);
      
    transformrotateZ(405deg);
    }

    input[type="checkbox"]:checked #izq {
      
    transformtranslateX(-80%);
    }

    input[type="checkbox"]:checked #der {
        
    transformtranslateX(80%);

    Thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    677
    Rep Power
    441
    You'll need -webkit-transform lines. Also, make sure you put -webkit- lines first, and the standard lines after. So:

    Code:
    -webkit-transform: translateX(-80%);
    transform: translateX(-80%);
    /* etc */
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    965
    Rep Power
    11
    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo