在 CSS3 中定义关键帧

cssweb developmentfront end technology更新于 2025/12/16 10:52:17

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

以下是在 CSS3 中定义关键帧的代码 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 100px;
   height: 100px;
   background: red;
   position: relative;
   animation: colorChange 5s infinite;
}
@keyframes colorChange {
   from {
      background: red;
      left: 0px;
   }
   to {
      background: rgb(32, 229, 255);
      left: 300px;
   }
}
</style>
</head>
<body>
<h1>Defining keyframes in CSS</h1>
<div></div>
<h2>The above square will change its color and position with time</h2>
</body>
</html>