div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 2s; animation-timing-function: linear; animation-direction: alternate; } @keyframes example { 0% {background-color:red; left:0px; top:0px;} 75% {background-color:green; left:0px; top:200px;} }

这段 CSS 代码定义了一个 div 元素，它的宽度和高度都是 100 像素，背景颜色是红色。它的定位方式是相对定位，即相对于它本来的位置进行定位。animation-name 属性指定了动画的名称为 example，animation-duration 属性指定了动画的持续时间为 2 秒，animation-timing-function 属性指定了动画的时间函数为线性，即匀速运动，animation-direction 属性指定了动画的方向为交替反向。@keyframes 规则定义了动画的关键帧，即动画从开始到结束的各个阶段。在这个例子中，动画从开始到 75% 的时间内，背景颜色由红色变为绿色，left 和 top 属性分别保持不变为 0 和 0 像素；而从 75% 到结束的时间内，背景颜色保持绿色不变，left 和 top 属性分别保持不变为 0 和 200 像素。