【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation

用户11865655

发布于 2025-10-13 17:58:42

3900

代码可运行

文章被收录于专栏：CSDN专栏CSDN专栏

运行总次数：0

代码可运行

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

normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
另一个值是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;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-09-27，如有侵权请联系 cloudcommunity@tencent.com 删除

css