11

I have a custom checkbox that is filled with transitions for border, color, etc. as well as for 3d transformation to flip it over. If the checkbox is unchecked it looks fine and transitions nicely between states, however, if the checkbox is given the checked attribute on dom load then it has to spin into place and the checkbox is visible on the backface.

enter image description here

NOTE: Although I link the JsFiddle so you can see the code the issue is not happening in the fiddle. It only happens if the style is linked via style sheet.

https://jsfiddle.net/tj2djeej/

/* Radio & Checkbox */

input.flipCheckbox {
  -webkit-transition: transform .5s linear 0s;
  -webkit-transform-style: preserve-3d;
  -webkit-appearance: none;
  -webkit-transform: rotatey(0deg);
  -webkit-perspective: 800;
  -webkit-transform-style: preserve-3d;
  box-sizing: border-box;
  position: relative;
  outline: none;
  width: 26px;
  height: 26px;
  border: 3px solid #C15649;
  cursor: pointer;
}
input.flipCheckbox:checked {
  -webkit-transform: rotatey(180deg);
}
input.flipCheckbox:after {
  -webkit-transform: rotatey(-180deg);
  -webkit-transition: color 0s linear .25s, -webkit-text-stroke-color 0s linear .25s;
  -webkit-text-stroke-color: transparent;
  cursor: pointer;
  line-height: 26px;
  font-size: 14px;
  width: 26px;
  height: 26px;
  position: absolute;
  z-index: 1;
  top: -3px;
  left: -3px;
  color: transparent;
  text-align: center;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: transparent;
}
input.flipCheckbox:checked:after {
  color: #C15649;
  -webkit-text-stroke-color: #C15649;
}
input.flipCheckbox:after {
  content: "\2713";
}
<input type="checkbox" class="flipCheckbox" />
<input type="checkbox" checked class="flipCheckbox" />

3
  • :after and :before psuedo selectors don't work in input elements in most browsers... Use an additional label styled as checkbox instead. Oct 12, 2016 at 0:55
  • @seahorsepip oh wow didn't know that, thanks for the tip.
    – DasBeasto
    Oct 12, 2016 at 1:10
  • I ended up using a fairly different solution (involving adding a :before element as well) but this answer proved invaluable for simplifying my code to make it possible so I accepted it. Thanks!
    – DasBeasto
    Oct 17, 2016 at 16:09

6 Answers 6

7
+200

If you just want to hide the checkmark when unchecked, there's backface-visibility: hidden.

input.flipCheckbox:after {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

This should simplify a lot of things for you. For one, you no longer need to animate the checkmark's color from transparent.

1
  • This could potentially simplify it a lot! I'll give a try and report back. I'm not sure if it'll solve the problem but might at least make it tolerable.
    – DasBeasto
    Oct 12, 2016 at 2:51
1

The :focus and :hover pseudo-classes should work well for your needs. Just move your transition rule from input.flipCheckbox to a new rule-set:

input.flipCheckbox:focus, body:hover input.flipCheckbox {
    -webkit-transition: transform .5s linear 0s;
}

Since the checkbox is not focused on page load the transition doesn't occur, yet when the user checks the check box it gains focus allowing the transition to occur. The only downside is if the checkbox uses focus before the animation completes. Like when a user is using just the keyboard and tabs away too quickly. That's where :hover steps in. Since :hover is applied to body (html or any other parent would work as well) as long as the cursor is on the page, the transition still occurs.

You could just use one or the other, but the two together covers everything except if the cursor is off the page and the user tabs away too quickly.

As you said, the issues doesn't occur in online editors, but here's the full code anyways.

input.flipCheckbox {
   -webkit-transform-style: preserve-3d;
   -webkit-appearance:none;
   -webkit-transform: rotatey(0deg);
   -webkit-perspective: 800;
   -webkit-transform-style: preserve-3d;
   box-sizing: border-box;
   position:relative;
   outline:none;
   width: 26px;
   height:26px;
   border: 3px solid #C15649;
   cursor: pointer;
}

input.flipCheckbox:focus, body:hover input.flipCheckbox {
    -webkit-transition: transform .5s linear 0s;
}

input.flipCheckbox:checked {
   -webkit-transform: rotatey(180deg);
}

input.flipCheckbox:after {
 -webkit-transform: rotatey(-180deg);
 -webkit-transition: color 0s linear .25s, -webkit-text-stroke-color 0s linear .25s;
 -webkit-text-stroke-color: transparent;
  cursor: pointer;
  line-height:26px;
  font-size:14px;
  width:26px;
  height:26px;
  position: absolute;
  z-index: 1;
  top:-3px;
  left:-3px;
  color:transparent;
  text-align: center;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: transparent;
}

input.flipCheckbox:checked:after {
   color: #C15649;
  -webkit-text-stroke-color: #C15649;
}

input.flipCheckbox:after {
  content:"\2713";
}
<input type="checkbox" class="flipCheckbox"/>
<input type="checkbox" checked class="flipCheckbox"/>

2
  • 1
    After trying this it does appear to work, however I would like to find a more robust answer if possible as I'm worried if this we're implemented on mobile (because of hover), or in a modal (possible loss of "body" context), or with mouse off page, this is a part of a plugin so I need it to work in ALL scenarios.
    – DasBeasto
    Oct 11, 2016 at 0:29
  • 1
    For mobile, there is no tabbing that I know of, so :focus will take care that. The :hover doesn't need to be on body, it can be on any parent, or even multiple parents. However, unless it's in an iframe, the body context won't be lost, since all elements should be a child of body.
    – David Mann
    Oct 11, 2016 at 6:53
1

You could set an animation on the element, that changes the element state at its own speed.

The trick here is to get an animation that is:

  • Not really an animation, in the sense that there is no change in the property value. This is achieved setting 2 different keyframes with the same value.
  • The same animation for both the checked and the unchecked states. If we change the animation name, the animation will be replayed every time that we change states. To allow for this, I set an animation that has 2 different parts, one that has the element rotated and another with the element unrotated. We use one part or the other changing the direction from normal to reverse. And setting an initial delay that makes it use only the last half.

I Have tried to reproduce your scenario via javascript, redenring the elemnt and setting the check state afterwards. I don't know for sure if this is equivalent to it.

On the snippet press the button and it will alternate rendering the element from scratch, once in the checked state and another in the unchecked

var ele;
var checked = true;

function reload() {
  var oldele = document.getElementById("test");

  ele = oldele.cloneNode(true);
  oldele.parentNode.replaceChild(ele, oldele);
  setTimeout(check, 1);
}

function check() {
  ele.checked = checked;
  checked = !checked;
}
.test {
  width: 100px;
  height: 100px;
  transition: transform 0.5s;
  transform: rotateY(180deg);
  animation-name: still;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-delay: -0.11s;
}
button {
  margin: 20px;
}
.test:checked {
  transform: rotateY(0deg);
  animation-direction: reverse;
}
input {
  animation-name: "";
}
@keyframes still {
  from, 49.9% {
    transform: rotateY(0deg);
  }
  50%,
  to {
    transform: rotateY(180deg);
  }
}
<input type="checkbox" class="test" id="test" />
<button onclick="reload()">Load</button>

2
  • This seems to work, although a bit more heavy handed than I had hoped. Could you explain just a little more exactly whats happening with the animation? Is it just rotating it the opposite way of the transition to nullify the spin or what, how is it making it stay "still"?
    – DasBeasto
    Oct 13, 2016 at 0:46
  • I have edited the answer. I hope that it is clearer now, but it's a little hard to explain. Also, I have fixed the timings and now the drawback that I originally had is no longer a problem.
    – vals
    Oct 13, 2016 at 10:39
1

It seems to be a bug with Chrome/Webkit. At least in my version of Chrome and Safari, the behavior I have is the following:

  • Without any script tag in the html or a script tag before the css link or a completely empty script tag, and without any input elements, there is no transition happening on div, or other non input elements.

  • Without any script tag in the html or a script tag before the css link or a completely empty script tag, as soon as there's one input element (whichever type), then all elements that have a style that doesn't match default value are transitioned.

  • If you add a script tag after the css link with at least a space inside it, then no transition occurs on load on any element.

So it looks like input elements trigger some kind of layout refresh, that strangely does not occur when a script is there. Maybe simply because of a delay somewhere in the parsing, or a condition that is wrongly set somewhere. At least this is the behavior I have with Chrome and Safari.

So you can simply add :

<script> </script> <!-- the space is important -->

after you link element, and you won't get the behavior you describe. It is not a css solution, but the problem doesn't seem to be with your CSS, so I'm posting it anyway.

0

Does it need to connect to an external style sheet? You may be able to get away with a <style> tag in the html file itself. If not, make sure that the <link> is in the header so that it loads first, enabling the CSS to be applied as soon as the page loads.

1
  • Yeah it will need to be able to load in an external style sheet as it it will be a part of a plugin so the end user can load it however they want. It was in the header and unfortunately did not solve the issue. Thank you though.
    – DasBeasto
    Oct 12, 2016 at 2:49
0

Bit hackish but satisfies the css only requirement. Do a one time "animation" on the elements with checked attribute:

input.flipCheckbox[checked]{
  animation-name: fakeRotate;
  animation-duration: 0.1s; 
  animation-iteration-count: 1;
}
@keyframes fakeRotate {
  from {
    transform: rotatey(180deg);
  }
  to {
    transform: rotatey(180deg);
  }
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.