Grady D Grady D - 5 months ago 12x
HTML Question

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.