Option 1: Using CSS 3
Try setting a transition
property in the .icons
css rule.
Like:
.icons {
background: red;
margin-left: 32px;
margin-right: 32px;
margin-top: 32px;
margin-bottom: 32px;
transition: 0.5s;
}
Option 2: Using jQuery
$(function(){
$('#check').on('change', function(){
if ($(this).is(':checked'))
{
$('.icons').fadeTo('slow', 0.3, function(){
$(this).css({'background': 'blue' });
}).fadeTo('slow', 1);
}
else $(".icons").css({'background':''});
});
});