ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀，每一条都经过真实交付验证。

首页 / 资讯中心 / 正文

CSS的动画

2026/8/3 3:19:45 拓冰建站 浏览量
CSS的动画

CSS的动画

在本节，我们将学习keyframes动画。

1. 动画的基本使用

1. 定义动画

定义动画有两种写法：

  1. 简单定义方式

    @keyframes 动画名 {/* from代表初始状态 */from {/*property1:value1*/transform: translate(0%);}/* to代表结束状态 */to {transform: translate(200%);}
}

  2. 完整定义方式

    @keyframes 动画名 {/* 使用百分比来控制动画进程 */25% {/*property1:value1*/transform: translateX(50%);}50% {transform: translateY(100%);}75% {transform: translateX(150%);}100% {transform: translateY(200%);}
}

1.2 元素应用动画

给元素添加animation属性，一般常用有三个属性：

  • name 定义的动画名称
  • time 动画持续时间
  • liner 动画算法，infinite是动画无限循环
#box {width: 100px;height: 100px;background-color: #f00;position: absolute;left: 0;top: 100px;/* name你定义的动画名称 time动画持续时间 liner动画算法  infinite动画无限循环*/animation: trans-auto 2s linear infinite;
}

1.3 代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>动画</title><style>#box {width: 100px;height: 100px;background-color: pink;position: absolute;left: 0;top: 100px;/* name定义的动画名称 time动画持续时间 liner动画算法  infinite动画无限循环*/animation: trans-auto 2s linear infinite;}@keyframes trans-auto {/* from代表初始状态 */from {transform: translate(0%);}/* to代表结束状态 */to {transform: translate(200%);}}</style></head><body><!-- 用@keyframes来做过渡效果 自动动画 无需触发 --><div id="box"></div></body>
</html>

1.4 演示效果

我们可以看到粉色的方块进行无线地平滑运动。

QQ录屏20240204194531 -original-original

2. 动画的其他属性

2.1 animation-timing-function

设置动画的类型，常用的值如下：

  1. ease ： 平滑动画（默认）
  2. linear ： 动画线性过渡
  3. ease-in ： 从慢到快
  4. ease-out ：从快到慢
  5. ease-in-out ：先慢再快后慢
  6. step-start ： 等同于 steps(1, start)
  7. step-end ： 等同于 steps(1, end)
  8. cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型

制作贝塞尔曲线的网页https://cubic-bezier.com/#.17,.67,.83,.67

2.2 animation-iteration-count

指定动画的播放次数 ，有两个值：

  1. number ：动画循环次数
  2. infinite ： 无限循环

其他属性可以去MDN查看：https://developer.mozilla.org/zh-CN/docs/Web