Animation not working in Safari or Chrome

HTML & CSS
1

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?


input[type="checkbox"] {
  background: rgba(255,255,255,.1);
  border-radius: 100%;
  border: 0;
  cursor: pointer;
  text-align: center;
  position: absolute;
  top: 5px;
  left: 45.2%;
  margin-left: -20px;
  width: 200px;
  height: 200px;
  opacity:0.4;
  /*filter:alpha(opacity=40); /* For IE8 and earlier */
 /* outline:0;*/
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}

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

input[type="checkbox"]:after {
  color: #fff;
  content: '+';
  font-size: 2em;
  line-height: 41px;
  width: 100%;
  height: 100%;
}

input[type="checkbox"]:checked {
  background: rgba(180,0,0,1);
  transform: rotateZ(405deg);
}

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

input[type="checkbox"]:checked ~ #der {
	transform: translateX(80%);
}

Thanks

2

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

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

Hi,

You missed the webkit prefixed necessary to make this work.


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.

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

[ot]

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 :p[/ot]

6

[ot]

I made it stick in my favorites, so I only have to remember it. ;)[/ot]