写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环
在前端开发中，要实现一个动画效果，可以使用CSS的@keyframes规则来定义动画的关键帧。以下是一个简单的例子，展示了如何创建一个动画，使得元素先向上匀速移动100px，然后向下以1.5倍的速度移动200px，并且这个动画会无限次地循环播放。
首先，在HTML中创建一个元素，比如一个<div>：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Example</title>
<style>
/* 定义动画 */
@keyframes moveUpDown {
0% {
transform: translateY(0);
animation-timing-function: linear; /* 向上匀速移动 */
}
50% {
transform: translateY(-100px); /* 移动到-100px位置 */
animation-timing-function: cubic-bezier(0.4, 0, 1, 1); /* 向下加速移动，这里使用贝塞尔曲线近似1.5倍速度效果 */
}
100% {
transform: translateY(100px); /* 从-100px位置移动到100px位置，总共向下移动200px */
}
}
/* 应用动画到元素 */
.animated-element {
width: 50px;
height: 50px;
background-color: red;
animation: moveUpDown 3s infinite; /* 动画名称，持续时间，无限循环 */
}
</style>
</head>
<body>
<div class="animated-element"></div> <!-- 应用动画的元素 -->
</body>
</html>
在这个例子中，.animated-element类被应用到了一个<div>元素上，这个<div>元素会执行名为moveUpDown的动画。动画的总时长被设置为3秒，并且会无限次地循环播放（infinite）。
注意，由于CSS动画中的animation-timing-function属性不能直接设置“1.5倍速度”，这里使用了一个贝塞尔曲线（cubic-bezier）来近似实现加速效果。你可以根据需要调整贝塞尔曲线的控制点，以达到更精确的速度控制。
此外，动画的50%关键帧处设置了元素向上移动100px，而在100%关键帧处，元素相对于起始位置向下移动了200px（从-100px到100px）。这样，元素就完成了先向上后向下的移动效果。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了