It’s likely that you started your day with a micro-interaction. By turning off the alarm on your mobile phone, you engaged with a user interface in a single moment.
You will continue to engage throughout the day in these moments with your digital devices. Each one is a micro-interaction. Each one is probably so small you don’t think about it. And each one works because of that simple fact.
As a designer, recognizing the invisibility of micro-interactions is just as important as designing them. You have to create something that feels human and accomplishes a task, making the life of a user easier. You also have to focus on a design that can work in a variety of environments and does not need any instruction or explanation.
Source: The Next Web
If you want to use the library as-it just link the css from the CDN.
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/ckd-css/latest/ckd-css.min.css">You can use a specific library version by replacing (inside the url) latest with the desired version:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/ckd-css/1.2.0/ckd-css.min.css">You can install ckd-css as dependency by using Npm or Bower.
npm install ckd-css
bower install ckd-css
Then link the css file from node_modules or bower_components in your html page ckd-css/dist/ckd-css.min.css
Just add your favourite animation class to the checkbox
<input type="checkbox" class="ckd-splash" />Check the DEMO PAGE