Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <style> .box { width: 100px; height: 100px; background-color: yellowgreen; animation-name: colorChangeAndMove; animation-duration: 4s; animation-iteration-count: infinite; } @keyframes colorChangeAndMove { 0% { background-color: yellowgreen; transform: translateX(0); } 25% { background-color: coral; transform: translateX(100px); } 50% { background-color: tomato; transform: translateX(200px) translateY(50px); } 75% { background-color: gold; transform: translateX(100px) translateY(100px); } 100% { background-color: yellowgreen; transform: translateX(0) translateY(0); } } </style> <div class="box"></div>
