Animating icon on checkbox when checked/unchecked

[toolman]

Hi,

I have a checkbox with an icon that changes on click/when checked. It works fine, but I wondered if its possible to add in some kind of fade animation on it? If so, what would would be the best way to do this?

This the the CSS:

label#show-hide-password-label{
	 pointer-events: auto;
	padding-top:  10px;
	font-weight: normal;
	position: relative;
	font-size: 16px;
		cursor: pointer
}

input.show-password[type=checkbox] { display:none; }
input.show-password[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
	font-size: 30px;

}

input.show-password[type=checkbox] + label:before {
	content: "\f00d";
 	margin-right:  15px;
	padding-left: 15px;
	color: #ccc;

}


input.show-password[type=checkbox]:checked + label:before { 
	content: "\f00c";
 	margin-right:  15px;
	padding-left: 9px;
	color: #fd8204;
} 

[PaulOB]

Hi,

You can’t animate the content property as you are just supplying new content so the change is immediate. You could fade one icon out and another in but it gets a little tricky.

This is code based on the font awesome page and if inserted into their live page with Live css editor will change the check icon.

.fa-check{position:relative;}
.fa-check:before{transition:all .5s ease;}
.fa-check:after{transition:all .5s ease;content:'\f00d';}
li:hover .fa-check:before{opacity:0;}
li .fa-check:after{opacity:0;position:absolute;left:4px;top:4px;font-size:1.5rem;}
li:hover .fa-check:after{opacity:1;color:#ae0000;}

Basically you use the :after element to place the rollover icon in the same place as the original icon and then on hover you fade one icon out and fade the other icon in.