检查/取消选中后的CSS动画

Question

目前我正在开发一个新网站（http://hawcons.com），我想在选中/取消选中复选框后获得流畅的动画。

目的是将描边图标切换为填充图标，反之亦然。在此期间，我想要一个褪色动画，使它看起来更顺畅。

任何猜测？

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;
}