How to have CSS animation only on click and not on page load?

Question

I am using https://github.com/FezVrasta/bootstrap-material-design in my project more specifically the checkbox this question is focused on the checkbox component, the entire library is being used in my project.

<label class="control-label">
  <div class="checkbox display-inline-block ">
    <label>
      <input type="checkbox" data-check="false" />
      <span class="ripple"></span>
      <span class="check"></span>
    </label>
  </div>
</label>

The problem is that the checkbox triggers an animation on page load and looks odd. The LESS code is https://github.com/FezVrasta/bootstrap-material-design/blob/master/less/_checkboxes.less#L88 and an example can be seen here http://codepen.io/anon/pen/ogmgRX

Does anyone know how to stop the animation for appearing on page load?

Answer 1

If you are instantiating it for the other elements in your DOM why not using something like:

$('label').click(function() { 
  $.material.checkbox();
});

See Example A.

or maybe use CSS to disable initial animation if checkbox is not checked:

input[type=checkbox]:not(:checked) + .checkbox-material:before {
  -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}

See Example B.