HTML 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>