hue and blur keyframes

by anup1986

HTML

<div id="header">
    <a href="#" id="click">Add</a>
    <p id="info"></p>
</div>

CSS

#header {
    position: fixed;
    top: 0;
    left: 0;
    height: 10px;
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid silver;
    
    background: lightblue;
}
#header.asset-added {
    background-image: -webkit-linear-gradient(0deg,#f35626,#d7b30a);
    
    -webkit-animation: hue 2s infinite linear;
}

@-webkit-keyframes hue {
    0% {
        -webkit-filter: hue-rotate(0) blur(0);
    }
    50%{
        -webkit-filter: hue-rotate(180deg) blur(2px);
    }
    100% {
        -webkit-filter: hue-rotate(360deg) blur(1px);
    }
}

@-webkit-keyframes invert {
    0%,100% {
        	background: linear-gradient(5deg, lightblue, transparent);
	        background-color: inherit;
    }
    50%{
        background: linear-gradient(-5deg, transparent, transparent);
        background-color: gold;
    }
}

JavaScript

$(document).ready(function () {
    $('#click').on('click', addCssClass);

    function addCssClass() {
        $('#header').addClass('asset-added');

        var i = 1;

        var inter = setInterval(function () {
            $('#info').text(i+++' seconds');
        }, 1000);

        setTimeout(function () {
            $('#header').removeClass('asset-added');
            $('#info').text('Timeout done, class removed!');
            clearInterval(inter);
        }, 4000);
    };
    
    addCssClass();
});