代码：
<!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>
标签：function,style,ball,ease,animation,timing,starter,255 From： https://www.cnblogs.com/fanqshun/p/17362416.html