菜鸟教程
教程 css tutorial

动画 keyframes

CSS 动画利用 @keyframes 定义动画序列，再通过 animation 属性应用于元素，实现连续变化。

1. 定义关键帧

使用 @keyframes 定义动画的不同阶段样式。

css 
@keyframes example {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

2. 应用动画

使用 animation 属性设置动画名称、时长、节奏和次数等。

css 
.element {
  animation: example 2s ease-in-out infinite;
}
  • 2s：动画持续时间
  • ease-in-out：缓动函数
  • infinite：无限循环

动画示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>CSS 动画 keyframes 示例</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #ff7043;
border-radius: 8px;
animation: slideMove 3s ease-in-out infinite;
margin: 40px auto;
}


@keyframes slideMove {
  0% {
    transform: translateX(0);
    background-color: #ff7043;
  }

  50% {
    transform: translateX(150px);
    background-color: #d84315;
  }

  100% {
    transform: translateX(0);
    background-color: #ff7043;
  }
}



</style>
</head>


<body>
<div class="box"></div>
</body>


</html>

相关内容