title: CSS only, no transition on load
body: <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/JiTqX.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/JiTqX.gif" alt="enter image description here"></a></p>
  
  <p><strong>NOTE:</strong> 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.</p>
  
  <p><a href="https://jsfiddle.net/tj2djeej/" rel="noreferrer">https://jsfiddle.net/tj2djeej/</a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Radio &amp; 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";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" class="flipCheckbox" /&gt;
  &lt;input type="checkbox" checked class="flipCheckbox" /&gt;</code></pre>
  </div>
  </div>
  </p>