在css中如何用@keyframes制作动画

使用@keyframes定义动画关键帧并应用animation属性实现CSS动画效果，如slideIn滑入、pulse脉冲等，通过设置持续时间、缓动函数、延迟和填充模式等参数控制动画行为。

在 CSS 中，使用 @keyframes 可以为元素创建动画效果。它定义了动画过程中的关键帧，也就是动画在不同时间点的样式状态。

1. 定义 @keyframes 动画

使用 @keyframes 后跟一个动画名称，然后在花括号中设置各个关键帧（如 0%、50%、100% 或 from/to）对应的样式：

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

上面的例子定义了一个名为 slideIn 的动画：元素从左侧外（左移100%自身宽度）滑动到正常位置。

2. 将动画应用到元素

通过 animation 属性把定义好的动画绑定到某个元素上：

立即学习“前端免费学习笔记（深入）”；

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slideIn 2s ease-in-out 0.5s forwards;
}

这里 animation 的参数依次是：

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

• 动画名称：对应 @keyframes 定义的名字
• 持续时间：2秒完成动画
• 缓动函数：ease-in-out 表示先慢后快再慢
• 延迟时间：0.5秒后开始
• 填充模式：forwards 表示动画结束后保持最后一帧的样式

3. 使用百分比设置多关键帧

你可以用百分比精确控制动画过程中的多个状态：

@keyframes pulse {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}

这个脉冲动画会让元素先放大变不透明，再恢复原样，适合做提示效果。

4. 常用 animation 属性简写或单独设置

除了简写的 animation，也可以单独设置属性：

• animation-duration：动画持续时间
• animation-timing-function：速度曲线
• animation-delay：延迟启动
• animation-iteration-count：播放次数（可设数字或 infinite）
• animation-direction：播放方向（如 reverse, alternate）
• animation-fill-mode：动画外时间的样式（如 backwards, both）
• animation-play-state：控制暂停（paused）或运行（running）

基本上就这些。只要定义好关键帧，再应用到元素上，就能实现流畅的 CSS 动画。注意浏览器兼容性，一般现代浏览器都支持，必要时可加 -webkit- 前缀。

以上就是在css中如何用@keyframes制作动画的详细内容，更多请关注php中文网其它相关文章！