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

问题

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?

回答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.

回答2:

This issue is fixed with PR#996 and will be available from the next release v.0.5.10.

The fix was to make sure the animation is applied only to the elements having focus using the :focus pseudo selector as shown in this Codepen demo

来源：https://stackoverflow.com/questions/29216868/how-to-have-css-animation-only-on-click-and-not-on-page-load