Author: | dylanraga |
---|---|
Views Total: | 5,692 views |
Official Page: | Go to website |
Last Update: | February 2, 2015 |
License: | MIT |
Preview:

Description:
Adding smooth check/uncheck transition effects to native checkboxes using CSS3 transitions, animations, transforms and @keyframes.
How to use it:
Add prefixfree.min.js for CSS3 vendor prefixes.
<script src="prefixfree.min.js"></script>
Create a normal checkbox with text label.
<input id="demo" type="checkbox"> <label for="demo"> <span></span> Lorem ipsum dolor sit amet <ins><i>Lorem ipsum dolor sit amet</i></ins> </label>
Reset CSS.
* { box-sizing: border-box; user-select: none; }
The core CSS/CSS3 rules.
input[type='checkbox'] { height: 0; width: 0; } input[type='checkbox'] + label { position: relative; display: flex; margin: .6em 0; align-items: center; color: #9e9e9e; transition: color 250ms cubic-bezier(.4, .0, .23, 1); } input[type='checkbox'] + label > ins { position: absolute; display: block; bottom: 0; left: 2em; height: 0; width: 100%; overflow: hidden; text-decoration: none; transition: height 300ms cubic-bezier(.4, .0, .23, 1); } input[type="checkbox"] + label > ins > i { position: absolute; bottom: 0; font-style: normal; color: #4FC3F7; } input[type="checkbox"] + label > span { display: flex; justify-content: center; align-items: center; margin-right: 1em; width: 1em; height: 1em; background: transparent; border: 2px solid #9E9E9E; border-radius: 2px; cursor: pointer; transition: all 250ms cubic-bezier(.4, .0, .23, 1); } input[type="checkbox"] + label:hover, input[type="checkbox"]:focus + label { color: #fff; } input[type="checkbox"] + label:hover > span, input[type="checkbox"]:focus + label > span { background: rgba(255,255,255,.1); } input[type="checkbox"]:checked + label > ins { height: 100%; } input[type="checkbox"]:checked + label > span { border: .5em solid #FFEB3B; animation: shrink-bounce 200ms cubic-bezier(.4, .0, .23, 1); } input[type="checkbox"]:checked + label > span:before { content: ""; position: absolute; top: .6em; left: .2em; border-right: 3px solid transparent; border-bottom: 3px solid transparent; transform: rotate(45deg); transform-origin: 0% 100%; animation: checkbox-check 125ms 250ms cubic-bezier(.4, .0, .23, 1) forwards; }
Create the animations using CSS3 @keyframes.
@keyframes shrink-bounce { 0% { transform: scale(1); } 33% { transform: scale(.85); } 100% { transform: scale(1); } } @keyframes checkbox-check { 0% { width: 0; height: 0; border-color: #212121; transform: translate3d(0, 0, 0) rotate(45deg); } 33% { width: .2em; height: 0; transform: translate3d(0, 0, 0) rotate(45deg); } 100% { width: .2em; height: .5em; border-color: #212121; transform: translate3d(0, -.5em, 0) rotate(45deg); } }
from where i can change the color of Right Mark ?