Animation动画

Animation属性

css3为Animation动画提供的几个属性如下：

属性名 属性值
animation-name 指定动画名称，该属性指定一个已有的关键帧定义。
animation-duration 指定动画持续时间。
animation-timing-funtion 指定动画变化速度。
animation-delay 指定动画延迟多长时间才开始执行。
animation-iteration-count 指定动画的循环执行次数。

animation：这是一个复合属性。

  • 该属性的格式为
    animation: animation-name animation-duration animation-timing-funciotn animation-delay animation-iteration-count.

keyframes(关键帧)：计算机动画术语

  • 帧——就是动画中最小单位的单幅影像画面，
  • 相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。
    关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。
    关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。

Keyframes被称为关键帧，其类似于Flash中的关键帧。
在CSS3中其主要以“@keyframes”开头，
后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{
  0%{
   background: red;
  }
  50%{
   background: red;
  }
  100%{
    background: green;
  }
}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01Keyframes</title>
    <style>
        @keyframes changecolor{
	0%{
		background:#E82733;
	}
	20%{
		background:#E038BA;
	}
	40%{
		background:#482EB1;
	}
	60%{
		background:#1DDD2D;
	}
	100%{
		background:#E3E834;
	}
}

div {
	width: 300px;
	height: 300px;
	margin: 100px auto;
	line-height: 300px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	background: #0F3;
}
div:hover{
	animation-name:changecolor;
	animation-duration:3s;
	animation-timing-function:ease-in;
	animation-delay:.4s;
	animation-iteration-count:3;
	/*animation:changecolor 3s ease-in 0.3s 2;*/
}
    
    </style>
</head>

<body>
	<div>鼠标放在我这儿，看变化</div>
</body>
</html>

animation-name 调用动画

animation-name属性主要是用来调用 @keyframes 定义好的动画。
需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），
如果不一致将不具有任何动画效果。
属性值：
none：默认值。当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。
@keyframes 定义的动画名称。

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}

@keyframes around {
	 0%{
	 transform:translateX(0);
	}
	 25% {
	 transform: translateX(180px);
	}
	 50% {
	 transform: translate(180px, 180px);
	}
	 75% {
	 transform:translate(0, 180px);
	}
	 100% {
	 transform: translateY(0);
	}
}
div {
	width: 200px;
	height: 200px;
	border: 2px solid #C0F;
	margin: 100px auto;
}
div span {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #93C;
	animation-name:around;
	animation-duration:10s;
	animation-timing-function:ease;
	animation-delay:.3s;
	animation-iteration-count:5;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02调用动画</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
	<div><span></span></div>
</body>
</html>

animation-duration 播放时间

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。

  • 单位：S秒
@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
@keyframes toradius{
  from {
    border-radius: 0;
  }
  to {
    border-radius: 50%;
  }
}
div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  background: green;
  margin: 20px auto;
  
  animation-name:toradius;
  animation-duration:2s;
  animation-timing-function:linear;
  animation-delay:.5s;
  animation-iteration-count:infinite;
}
div:hover{
	animation-play-state:paused;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03设置动画播放时间</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div>Hover Me</div>
</body>
</html>

animation-timing-function 动画播放方式

主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。

参数 说明
ease 默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。
linear 线性速度。动画开始时的速度和结束时的速度一样（匀速）。
ease-in 动画开始的速度较慢，然后速度加快。
ease-out 动画开始的速度很快，然后速度减慢。
ease-in-out 动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>04设置动画播放方式</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div><span></span></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
@keyframes move {
  0%{
    transform: translate(0);
  }
  15%{
    transform: translate(100px,180px);
  }
  30%{
    transform: translate(150px,0);
  }
  45%{
    transform: translate(250px,180px);
  }
  60%{
    transform:translate(300px,0);
  }
  75%{
    transform: translate(450px,180px);
  }
  100%{
    transfrom: translate(480px,0);
  }
}
div{
	width:500px;
	height:200px;
	border:2px solid #903;
	margin:100px auto;
}
div span{
	display:inline-block;
	width:20px;
	height:20px;
	background:#C0F;
	border-radius: 100%;
	animation-name:move;
	animation-duration:10s;
	animation-timing-function:ease-out;
}

animation-iteration-count 动画播放次数

  • 其值通常为整数，但也可以使用带有小数的数字，其默认值为1，
    这意味着动画将从开始到结束只播放一次。

  • 如果取值为infinite，动画将会无限次的播放。

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
@keyframes move {
  0%{
    transform: translate(0);
  }
  15%{
    transform: translate(100px,180px);
  }
  30%{
    transform: translate(150px,0);
  }
  45%{
    transform: translate(250px,180px);
  }
  60%{
    transform:translate(300px,0);
  }
  75%{
    transform: translate(450px,180px);
  }
  100%{
    transfrom: translate(480px,0);
  }
}
div{
	width:500px;
	height:200px;
	border:2px solid #903;
	margin:100px auto;
}
div span{
	display:inline-block;
	width:20px;
	height:20px;
	background:#C0F;
	border-radius: 100%;
	animation-name:move;
	animation-duration:10s;
	animation-timing-function:ease-out;
	animation-iteration-count:infinite;
	/*animation:move 10s ease-in infinite;*/
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>06设置动画播放的次数</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div><span></span></div>
</body>
</html>

animation-direction 动画播放方向

其主要有两个值：normal、alternate

  1. normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
  2. 另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

例如：通过animation-direction属性，
将move动画播放动画方向设置为alternate，代码为：
animation-direction:alternate;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>07设置动画播放的方向</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div><span></span></div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
@keyframes move {
  0%{
    transform: translateY(90px);
  }
  15%{
    transform: translate(90px,90px);
  }
  30%{
    transform: translate(180px,90px);
  }
  45%{
    transform: translate(90px,90px);
  }
  60%{
    transform: translate(90px,0);
  }
  75%{
    transform: translate(90px,90px);
  }
  90%{
    transform: translate(90px,180px);
  }
  100%{
    transform: translate(90px,90px);
  }
}
div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #03F;
  transform: translateY(90px);
  animation-name: move;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: .2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  
 /* animation-direction:normal;*/
}
div span:hover{
	animation-play-state:paused;
}

animation-play-state 元素动画的播放状态

其主要有两个值：running和paused。
其中running是其默认值，主要作用就是类似于音乐播放器一样，
可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，

  • 这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>08设置动画播放状态</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div><span></span></div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
@keyframes move {
  0%{
    transform: translateY(90px);
  }
  15%{
    transform: translate(90px,90px);
  }
  30%{
    transform: translate(180px,90px);
  }
  45%{
    transform: translate(90px,90px);
  }
  60%{
    transform: translate(90px,0);
  }
  75%{
    transform: translate(90px,90px);
  }
  90%{
    transform: translate(90px,180px);
  }
  100%{
    transform: translate(90px,90px);
  }
}
div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #03F;
  transform: translateY(90px);
  animation-name: move;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: .2s;
  animation-iteration-count:infinite;
  animation-direction:normal;
  animation-play-state:paused;/*加载时暂定*/
 /* animation-direction:normal;*/
}
div:hover span{
	animation-play-state:running;
}

animation-fill-mode 定义在动画开始之前和结束之后发生的操作

主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

参数 说明
none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards 表示动画在结束后继续应用最后的关键帧的位置
backwards 会在向元素应用动画样式时迅速应用动画的初始帧
both 元素动画同时具有forwards和backwards效果

在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。

简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>09设置动画时间外属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
@keyframes redToBlue{
  from{
    background: red;
  }
  20%{
      background:green;
  }
  40%{
      background:lime;/*绿黄色*/
  }
  60%{
      background:yellow;
  }
  to{
    background:blue;
  }
}

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  animation-name:redToBlue;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay:.2s;
   /*  animatin-fill-mode: both; */
  -webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

🤩CSS教学往期回顾

  1. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
  2. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
  3. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
  4. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
  5. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
  6. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
  7. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  8. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数

💕👉博客专栏

# css # 前端 # css3
Logo
码道开发者社区

码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践

更多推荐

cover

AI 已经能直接改设计稿了:Windows部署Penpot，接入Codex MCP实测

avatar 码道开发者社区

【AI 业务流架构师】AI 业务流架构师方法论：Agentic AI 范式转移与业务编排思维

2026 年，Anthropic CEO Dario Amodei 在 Code with Claude 大会上的一个判断广为流传：一个人运营一家十亿美元级公司的概率是 70%–80%。这句话听起来像科幻小说的设定，但它背后是一个正在发生的结构性变化——AI 把"执行"的成本压到了历史低点，同时把"编排"的价值推到了前台。这意味着我们需要一套新的思考框架，来回答两个问题：一个人如何拥有一个公司的产

avatar 码道开发者社区
cover

Codex CLI实战 从一句模糊需求到可执行可测试可验收的开发任务把“帮我优化一下”变成 Codex 能执行、团队能复核、测试能证明的工程任务

avatar 码道开发者社区