SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Animation not working in Safari or Chrome

    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
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    ebsolutions,

    The code that you posted targets input elements, not divs, so I'm not sure what you are doing. If you will read the posting guidelines (see the link at the bottom of my post) and post a working page (starts with <!doctype>, ends with </html>) that demonstrates the issue, we can probably help. We need to be able to replicate the problem on our PCs to troubleshoot it. Alternatively, you can post a link to a working page. CSS without HTML is not usually very helpful.

    Thanks

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, we need a working example, as CSS on its own doesn't do anything. But one thing to note is that vendor prefixed versions of a property should come before the non-prefixed version, rather than after.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You missed the webkit prefixed necessary to make this work.

    Code:
    input[type="checkbox"]:checked {
    	background: rgba(180,0,0,1);
    	-webkit-transform: rotateZ(405deg);
    	-moz-transform: rotateZ(405deg);
    	transform: rotateZ(405deg);
    
    }
     input[type="checkbox"]:checked ~ #izq {
     -webkit-transform: translateX(-80%);
     -moz-transform: translateX(-80%);
     transform: translateX(-80%);
    
    }
     input[type="checkbox"]:checked ~ #der {
     -webkit-transform: translateX(80%);
     -moz-transform: translateX(80%);
     transform: translateX(80%);
    }
    Note that you are using :after on an input and that is not part of the specs as inputs are replaced elements and do not have an :after or :before (although webkit believe they do) but won't work reliably cross browser.

    Quote Originally Posted by ronpat
    The code that you posted targets input elements, not divs, so I'm not sure what you are doing.
    That's technique is using a checkbox so that you can leverage the :checked state to perform styling on adjacent or general siblings (e.g. input:checked ~ div{display:none}). It's a way of having a click event without using javascript and can be used to toggle things (either on or off or to animate in different ways) and in a way that remains persistent no matter what else is clicked on the page.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    That's technique is using a checkbox so that you can leverage the :checked state to perform styling on adjacent or general siblings (e.g. input:checked ~ div{display:none}). It's a way of having a click event without using javascript and can be used to toggle things (either on or off or to animate in different ways) and in a way that remains persistent no matter what else is clicked on the page.
    Thanks very much @Paul O'B for the explanation and the demo code. I need to dream up some examples where I can apply this to make it "stick" between my ears

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by ronpat View Post
    Off Topic:

    Thanks very much @Paul O'B for the explanation and the demo code. I need to dream up some examples where I can apply this to make it "stick" between my ears
    I made it stick in my favorites, so I only have to remember it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •