Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <style> body { display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .box { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; background-color: #3498db; color: white; font-size: 16px; margin: 20px; animation: move 2s linear infinite; } .replace { animation: changeColor 2s linear infinite; animation-composition: replace; } .add { animation: changeColor 2s linear infinite; animation-composition: add; } .accumulate { animation: changeColor 2s linear infinite; animation-composition: accumulate; } /* Animation Definitions */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } @keyframes changeColor { 0% { background-color: red; } 100% { background-color: blue; } } </style> </head> <body> <div class="box replace">Replace</div> <div class="box add">Add</div> <div class="box accumulate">Accumulate</div> <div><strong>.replace, .add, and .accumulate</strong> classes each apply a new animation (changeColor) with different animation-composition values: <br><br> <strong>.replace:</strong> The changeColor animation replaces the existing move animation. <br><br> <strong>.add:</strong> The changeColor animation is added to the existing move animation, so both animations run simultaneously.<br><br> <strong>.accumulate: </strong>The changeColor animation is accumulated with the existing move animation, so both animations affect the element together. </div> </body> </html>