Animated Material Design Checkbox With CSS / CSS3

A pure CSS / CSS3 solution used to create animated checkboxes following the Google Material Design pattern.

How to use it:

Wrap the checkbox into a label element:

<label>
  <input type="checkbox">
  <span>material checkbox</span> 
</label>

The core CSS / CSS3 rules to style and animate the checkbox on toggle.

label {
  margin: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1rem;
  height: 1rem;
  background: inherit;
}
input {
  background: tra;
  position: relative;
  cursor: pointer;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: .4rem;
  background: inherit;
}
input:before {
  content: "";
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  background: inherit;
  cursor: pointer;
}
input:after {
  content: "";
  transition: .4s ease-in-out;
  position: absolute;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  border: .1rem solid rgba(200, 200, 200, .3);
}
input:checked:after {
  transform: rotate(-45deg);
  height: .5rem;
  border-color: #43A047;
  border-top-color: transparent;
  border-right-color: transparent;
}