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

I am using 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 ">
      <input type="checkbox" data-check="false" />
      <span class="ripple"></span>
      <span class="check"></span>

The problem is that the checkbox triggers an animation on page load and looks odd. The LESS code is and an example can be seen here

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



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

$('label').click(function() { 

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.


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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.