代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>測試 css animation 函數</title> <style> .animation-corridor { position: relative; height: 100px; } .animation-ball { position: absolute; top: 25px; width: 50px; height: 50px; background-color: blue; background-image: radial-gradient( circle at 10px 10px, rgba(25, 255, 255, 0.8), rgba(25, 255, 255, 0.4) ); border-radius: 50%; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } </style> </head> <body> <div class="animation-corridor"> <div class="animation-ball" id="ball"></div> </div> <ul> <li> <button class="animation-button" id="starter">Start animation</button> </li> <li> <label for="easing-select">Choose an easing function:</label> <select id="easing-select"> <option selected>linear</option> <option>linear(0, 0.5 50%, 1)</option> <option>ease</option> <option>ease-in</option> <option>ease-in-out</option> <option>ease-out</option> <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> <script> const selectionElement = document.querySelector('#easing-select'); const starter = document.querySelector('#starter'); const ball = document.querySelector('#ball'); starter.addEventListener('click', () => { if (starter.textContent === 'Start animation') { ball.style.animationName = 'move-right'; ball.style.animationTimingFunction = selectionElement.value; starter.textContent = 'Stop animation'; } else { ball.style.animationName = 'unset'; starter.textContent = 'Start animation'; } }); selectionElement.addEventListener('change', () => { ball.style.animationTimingFunction = selectionElement.value; }); </script> </body> </html>