HTML CSS

BACKGROUND COLOR ANIMATION WITH CSS

CSS TRANSITION #demo { transition: background-color 1s; }   BACKGROUND COLOR CHANGE #demo.swap{ background: #e00; }

<div id="demo" onclick="document. getElementById('demo').classList.toggle ('swap')"></div>

KEYFRAMES COLOR SEQUENCE @keyframes morph {   0% { background-color: red; }   50% { background-color: green; }   100% { background-color: blue; }  }

ATTACH KEYFRAMES TO CSS CLASS #demo.swap { animation: morph 5s linear 0.3s; }

<div id="demo" onclick="document. getElementById('demo').classList.toggle ('swap')"></div>