如何创建 CSS3 关键帧动画?

cssweb developmentfront end technology更新于 2025/11/27 11:56:17

要在 CSS3 中创建关键帧动画，请定义单个关键帧。关键帧将控制 CSS3 中的中间动画步骤。

以下是使用 CSS3 创建关键帧动画的步骤 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 100px;
   height: 100px;
   background: rgb(218, 78, 36);
   border: 4px solid rgb(0, 0, 0);
   position: relative;
   animation: circleMove 5s infinite;
}
@keyframes circleMove {
   from {
      left: 0px;
      border-radius: 0px;
   }
   to {
      left: 200px;
      border-radius: 50%;
   }
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<div></div>
</body>
</html>