CSS Animation After Checking/Unchecking

Question

Currently I am working on a new website (http://hawcons.com) where I want to have a smooth animation after checking/unchecking the checkbox.

The aim is to switch the stroked icons to filled icons and vice versa. During that I want to have a fading animation to make it look smoother.

Any guesses?

Answer 1

Pure CSS Solution

HTML

<input type='checkbox' />
<div id='wrap'>
    <div></div>
    <div></div>
</div>

CSS

body {
    background:green;
}
#wrap {
    height:200px;
    position:relative;
}
div div {
    height:60px;
    background-repeat:no-repeat;
    position:absolute;
    width:100%;
    top:0;
}
div div {
    transition:opacity 250ms ease-in;
}
div div:first-child {
    background-image: url(http://hawcons.com/files/images/iconsfilled.svg);
    opacity:1;
}
div div:last-child {
    background-image: url(http://hawcons.com/files/images/icons.svg);
    opacity:0;
}
input[type=checkbox]:checked+div div:first-child {
    opacity:0;
}
input[type=checkbox]:checked+div div:last-child {
    opacity:1;
}