前端必修技能：高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画）

在CSS的世界里，存在着多种能体现动画效果的属性：CSS transform、CSS Transition 和 CSS Animation。让开始接触CSS的同学感到困惑。要搞清楚CSS的动画，我们就必须先把这几种属性做一下区别。

CSS transform 属性、CSS Transition 属性、 CSS Animation 属性的区别

CSS transform （形变）CSS transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

CSS Transition （过渡）很多网站都把这个属性翻译成过渡，也有人把它翻译成 补间。为什么这样呢？因为它的原理是：设置关键帧的初始状态，然后在另一个关键帧改变这个状态，比如大小、颜色、透明度、位置等，浏览器将自动根据二者之间帧的值创建的过渡效果。这明显动起来的东西，W3C并不认为它是动画。大概因为它无法管理过渡的中间过程。

CSS Animation（动画）我私下觉得，这个可能才是W3C组织在定义CSS规则时候认可的动画，采用关键帧方式创建和管理动画，甚至可以完全控制每一段动画的表现。它既可以实现 补间动画 的动画效果，也可以使其以 逐帧动画 的方式进行绘制。

现在，我们总结一下上述三种动画的区别：transform形变 和 Transition过渡，都是不必通过 @keyframes 创建的。我们可以通过它们改变CSS元素的样式，使他们看上去变化甚至运动起来。而 Animation（关键帧动画），是CSS最核心的动画属性。

接下来，让我们通过实例，一步步去详细了解这三种属性。

CSS transform （形变）

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

提供了一些css 函数来进行使用

• 平移：translate(x, y)
• 缩放：scale(x, y)
• 旋转：rotate(deg)
• 倾斜：skew(deg, deg)

CSS transform 语法：

transform: none|transform-functions;

transform 可以设置多个函数组合用空格隔开，举个例子

transform: translate(-50%,-50%) scale(0.5) rotate(45deg);

上述代码的作用：沿x轴(向左)，Y轴(向上)平移div的位置为自身高度和宽度的50%（使得div与其父元素的中心点重合，实现垂直居中对齐），同时，缩小div的大小为原来的50%，并且顺时针旋转45deg。

我们通过一张平面直角坐标系的图，更容易理解2D转换。请你在学习2d转换的过程中，牢牢记住这张图。

现在，你已经掌握了 transform 的基本语法。现在我们看一看它的具体应用。

CSS 2D 转换

CSS 2D转换属性

transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。

使用 CSS transform 属性，你可以使用下面这些2D 转换方法：translate()、rotate()、scaleX()、scaleY()、scale()、skewX()、skewY()、skew()、matrix()

translate() 方法

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

.box{
  background: #ffc;
  width: 100px;
  height: 100px;
  border:1px solid #000;
  box-sizing: border-box;
  cursor: pointer;
}
.box:hover{
  transform: translate(100px);
}

上面的例子，我们先定义了一个div，让鼠标悬浮到div上面时，这个div将发生移动：从其当前位置向右移动100 像素。

效果虽然很简陋，但这就是这行代码产生的效果。此外，还可以使用translateX()和translateY()分别控制元素在X轴和Y轴上的移动，你也可以通过下面这样的代码，将元素向右移动100px并向下移动200px。

transform: translate(100px, 200px)

rotate() 方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

下面的例子把 div 元素顺时针旋转 20 度（使用负值将逆时针旋转元素。）：

.box:hover{ transform: rotate(20deg);/* 顺时针旋转 */ }

通过上述案例，我们可以知道，div静止的初始角度为0，旋转的中心是div的中心。那么，若你将角度设置为360deg，你猜猜会发生什么？

scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

下面的例子把 div 元素增大为其原始宽度的两倍和其原始高度的三倍：

.box:hover{ transform: scale(2, 3); }

通过上面案例，你是否发现，放大缩小的中心点也是原来div元素的中心点。

scaleX() 方法

scaleX() 方法增加或减少元素的宽度。让我们想想，如果我要将宽度增加原来的div宽度的一倍，应该怎么写呢？100% 还是200%？

.box:hover{ transform: scaleX(2); /* transform: scaleX(200%); */ }

经过测试，我们发现

transform: scaleX(2); 

与

 transform: scaleX(200%);

的效果是一样的。这说明，scaleX()方法，与大多数 CSS方法一样，同时支持 百分比写法。

scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把 div 元素增大到其原始高度的三倍：

.box:hover{ transform: scaleY(3); }

skewX() 方法

skewX() 方法使元素沿 X 轴 倾斜 给定角度。

下例把 div 元素沿X轴倾斜 20 度：

.box:hover{ transform: skewX(20deg); }

能想象出倾斜是什么样子吗？

skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把 div 元素沿 Y 轴倾斜 20 度：

.box:hover{ transform: skewY(20deg); }

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使 div 元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：

.box:hover{ transform: skew(20deg,10deg); }

需要提醒注意的是，如果你使用 skew()方法时，仅写了一个值。如下：

.box:hover{ transform: skew(20deg); }

你猜猜会发生什么？会是X轴，Y轴同时倾斜20度吗？哈哈，想太多了 ！ W3C告诉你：如果未指定第二个参数，则值为零。因此，上面例子只能 使 div 元素沿 X 轴倾斜 20 度：

matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

我们不做多解释，先举个例子：

.box:hover{ transform: matrix(2, -0.3, 0, 1, 10, 50); }

好了，基本的2D变换属性都学完了。下面列表是对2D转换方法的总结：

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

CSS 3D 转换

什么是3D转换，它和2D转换有什么不同？

我用一副图回答你！

看明白了吧。3D的转换，多了一个维度。下面是上述两个div的转换代码：

.box:hover{ 
    transform: rotate(360deg);/* 2D */ 
} 
.box2:hover{ 
    transform: rotateX(360deg);/* 3D */ 
}

同样是360度旋转，却产生了不同的效果。2D，就永远停留在屏幕的这个平面维度上。

CSS 3D 转换属性

下表列出了所有 3D 变换属性：

属性	描述	支持
transform	向元素应用 2D 或 3D 转换。	2D，3D
transform-origin	允许你改变被转换元素的位置。	2D，3D
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3D
perspective	规定 3D 元素的透视效果。	3D
perspective-origin	规定 3D 元素的底部位置。	3D
backface-visibility	定义元素在不面对屏幕时是否可见。	3D

对比2D的转换属性，我们可以看到。3D转换新增了几个转换属性。后面我们在做讨论。现在让我们先把重点放到转换方法上。

通过 CSS transform 属性，您可以使用以下 3D 转换方法：rotateX()、rotateY()、rotateZ()。

rotateX()方法

rotateX() 方法使元素绕其 X 轴旋转给定角度：

.box2:hover{ transform: rotateX(360deg);/* 3D */ }

rotateY()方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

.box2:hover{ transform: rotateY(360deg);/* 3D */ }

rotateZ()方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度：

.box2:hover{ transform: rotateZ(360deg);/* 3D */ }

意外吧？rotateZ 居然跟 rotate得到了同样的结果，为什么这样呢？其实，当你把X轴，Y轴，Z轴的空间感建立之后，你就明白了。如果X轴是平行与我们的浏览器屏幕的水平方向，Y轴是平行于浏览器的垂直方向，那么Z轴呢？它是垂直于屏幕的一条轴。所以，rotateZ理所当然的就是围绕z轴为中心在旋转了。它已经脱离了二维的平面。

参考上图，可以很好的理解CSS3D转换的方法原理。

CSS 3D 转换方法

下面表格列出了目前阶段CSS3支持的所有3D转换的方法。

函数	描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

基于上述列表中的参数写法都差不多，我就不一一列举了。接下来，我们通过一系列的图示来对比一下列表中这些旋转效果与2D动画的区别。

translate（位移）方法对比

rotate（旋转）方法对比

scale（缩放）方法对比

skew（倾斜）方法对比

perspective（透视距离）方法对比

上述图示可见，当 perspective 越小时，透视距离我们的眼睛越近，透视产生的形变越明显。

CSS3 transform-origin 属性

属性定义及使用说明

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。注意： 使用此属性必须先使用transform 属性。

transform-origin属性的语法

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值：left、 center 、right、 length 、 %
y-axis	定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、%
z-axis	定义视图被置于 Z 轴的何处。可能的值：length

transform-origin的几组不同参数产生的效果对比

 

代码奉上

我把上面的对比代码发到这里，感兴趣的同学，以制到本地测试一下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 3D转换动画与2D转换动画的效果对比</title>

</head>
<style>


* {
  padding: 0;
  margin: 0;
}
body{
  font-size: 14px;
  padding: 20px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.card {
  display: inline-block;
  margin: 30px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 40px;  
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.box{
  width: 100px;
  height: 100px;
  margin: auto;
  background: #eee;
  cursor: pointer;
  box-shadow: 0 0 15px #ddd inset;
}


.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #ff99bb;
  opacity: .7;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}

.rotate:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotateX:hover .fill {
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

.rotateY:hover .fill {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}

.rotateZ:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.scale:hover .fill {
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
}

.scaleX:hover .fill {
  -webkit-transform: scaleX(2);
  transform: scaleX(2);
}

.scaleY:hover .fill {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.skew:hover .fill {
  -webkit-transform: skew(45deg, 45deg);
  transform: skew(45deg, 45deg);
}

.skewX:hover .fill {
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}

.skewY:hover .fill {
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}

.translate:hover .fill {
  -webkit-transform: translate(45px, 1em);
  transform: translate(45px, 1em);
}

.translateX:hover .fill {
  -webkit-transform: translateX(45px);
  transform: translateX(45px);
}

.translateY:hover .fill {
  -webkit-transform: translateY(45px);
  transform: translateY(45px);
}

.matrix:hover .fill {
  -webkit-transform: matrix(2, 2, 0, 2, 45, 0);
  transform: matrix(2, 2, 0, 2, 45, 0);
}

.perspective-100 .box {
  -webkit-perspective: 100px;
  perspective: 100px;
}

.perspective-200 .box {
  -webkit-perspective: 200px;
  perspective: 200px;
}

.to-100-0-0 {
  -webkit-transform-origin: 100% 0 0;
          transform-origin: 100% 0 0;
}

.to-0-100-0 {
  -webkit-transform-origin: 0 100% 0;
          transform-origin: 0 100% 0;
}

</style>
<body>

<h1>Css3 Transform</h1>
<!-- Rotate-->
<div class="card">
  <div class="box rotate">
    <div class="fill"></div>
  </div>
  <p>rotate(45deg)  </p>
</div>
<div class="card">
  <div class="box rotateX">
    <div class="fill"></div>
  </div>
  <p>rotateX(45deg)</p>
</div>
<div class="card">
  <div class="box rotateY">
    <div class="fill"></div>
  </div>
  <p>rotateY(45deg)</p>
</div>
<div class="card">
  <div class="box rotateZ">
    <div class="fill"></div>
  </div>
  <p>rotateZ(45deg)  </p>
</div>
<!-- scale-->
<div class="card">
  <div class="box scale">
    <div class="fill"></div>
  </div>
  <p>scale(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill"></div>
  </div>
  <p>scaleX(2)    </p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill"></div>
  </div>
  <p>scaleY(2)    </p>
</div>
<!-- skew-->
<div class="card">
  <div class="box skew">
    <div class="fill"></div>
  </div>
  <p>skew(45deg, 45deg)  </p>
</div>
<div class="card">
  <div class="box skewX">
    <div class="fill"></div>
  </div>
  <p>skewX(45deg)</p>
</div>
<div class="card">
  <div class="box skewY">
    <div class="fill"></div>
  </div>
  <p>skewY(45deg)</p>
</div>
<!-- translate-->
<div class="card">
  <div class="box translate">
    <div class="fill"></div>
  </div>
  <p>translate(45px)  </p>
</div>
<div class="card">
  <div class="box translateX">
    <div class="fill"></div>
  </div>
  <p>translateX(45px)</p>
</div>
<div class="card">
  <div class="box translateY">
    <div class="fill"></div>
  </div>
  <p>translateY(45px)</p>
</div>
<div class="card">
  <div class="box matrix">
    <div class="fill"></div>
  </div>
  <p> matrix(2, 2, 0, 2, 45, 0)</p>
</div>
<h4>Perspective : 100</h4>
<div class="perspective-100">
  <div class="card">
    <div class="box rotateX">
      <div class="fill"></div>
    </div>
    <p>rotateX(90deg)</p>
  </div>
  <div class="card">
    <div class="box rotateY">
      <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
  </div>
</div>
<h4>Perspective : 200</h4>
<div class="perspective-200">
  <div class="card">
    <div class="box rotateX">
      <div class="fill"></div>
    </div>
    <p>rotateX(90deg)</p>
  </div>
  <div class="card">
    <div class="box rotateY">
      <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
  </div>
</div>
<!-- transform origin-->
<h2>Transform origin</h2>
<div class="card">
  <div class="box rotate">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100% 0 0  <br/>rotate(45deg)</p>
</div>
<div class="card">
  <div class="box rotate">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>rotate(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateX">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>rotateX(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateX">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100% 0 0<br/>rotateX(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateY">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0 <br/>rotateY(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateY">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>rotateY(45deg)</p>
</div>
<div class="card">
  <div class="box scale">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>scale(2)</p>
</div>
<div class="card">
  <div class="box scale">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>scale(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>scaleX(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>scaleX(2)</p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>scaleY(2)</p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>scaleY(2)</p>
</div>
</body>
</html>

不知道你注意到没有，从 CSS 3D 转换 这一节开始，截图的动画就流畅平滑了很多。为什么这样呢？因为之前2D动画都是简单的移动，我没有给动画做缓动处理。所以，单纯的使用transform属性，变化其实非常的突兀。那么，要让动画变得平滑而有明显的过渡动画时，应该怎么办呢？

我给后面的动画都加上了这句话：

transition: transform 0.5s;

没错，这就是接下来我们要讲的：CSS Transition属性。

CSS Transition （过渡）属性

过渡属性的定义：在指定的时间内，让CSS元素从一个开始的样式过渡要结束的样式。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

显然，过渡属性具有一个开始的点，一个结束的点，和一段持续的时间。那么，它应该需要一个触发机制。在网页上，典型的触发机制是什么？鼠标和键盘。那么在我们熟悉的HTML标签中很多标签都可以响应鼠标交互。那么，可以响应鼠标的CSS伪类有哪几个呢？:hover（悬停）、:active（点击）、:focus（获得焦点） 。是的，我们可以利用这三种交互，触发CSS的过渡属性，改变HTML标签的样式。这也是为什么我们经常见到的过渡动画都是通过鼠标交互来触发的。

当然，也有不需要人工交互就可以触发的过渡动画。因为触发它是目的，而无论是鼠标、键盘、js、CSS、或者什么方法也好，都是触发它的工具。

CSS Transition属性的触发：

下面是一个典型的鼠标触发的过渡动画：以下CSS代码会在元素的 width 属性从 100px 变为 200px 时触发过渡效果：

div {
  width: 100px;
  transition: width 1s;
  -webkit-transition: width 1s; /* Safari */
}
 
div:hover {
  width: 200px;
}

在这个例子中，当鼠标悬停在 div 上时，它的宽度会在 1 秒内从 100px 变为 200px，触发了过渡效果。

下面是一个不使用人工交互就可以触发CSS过渡动画的例子。与上面的代码不同的是，去掉了 :hover 伪类，增加了 animation 动画，并把动画绑定在了 div上面。

div {
  width: 100px;
  transition: width 1s;
  -webkit-transition: width 1s; /* Safari */
  animation: changeWidth 5s infinite;
}
 
@keyframes changeWidth {
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

在这个修改后的例子中，div 的宽度将会无限循环地在 100px 和 200px 之间变化，每次变化都会触发过渡效果。效果如下图所示：

经过了上面的学习，你现在知道了过渡动画的两种应用的方式。接下来，我们来详细解读 过渡动画。

CSS Transition属性定义及使用说明

transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。它具备下面四种属性值：

1. transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
2. transition-duration: 指定过渡效果持续的时间，以秒或毫秒为单位。
3. transition-timing-function: 指定过渡效果的速度曲线。可以是 linear（线性）、ease（渐入渐出）、ease-in（渐入）、ease-out（渐出）、ease-in-out（先渐入后渐出）等。
4. transition-delay: 指定过渡效果开始之前的延迟时间，以秒或毫秒为单位。

下面是一个指定属性名称的实例：

/* 对所有属性都应用过渡效果 */
.element{
  transition: all 0.3s ease;
}

/* 对指定属性（颜色）应用过渡效果 */
.element{
  transition:color 0.3s ease-in-out;
}

CSS Transition属性的语法

 基本语法
 transition: property duration timing-function delay;
 
 /* 单条 简写形式 */
  transition: 
    <property> <duration> <timing-function> <delay>;
  
  
  /* 多条 简写形式 */
  transition: 
    <property> <duration> <timing-function> <delay>,
    <property> <duration> <timing-function> <delay>,
    ...;


  /* 单条 子属性形式 */
  transition-property: <property-name>;
  transition-duration: <duration-time>;
  transition-timing-function: <timing-function>;
  transition-delay: <duration-time>;
  
  
  /* 多条 子属性形式 */
  transition-property: <property-name> [, <property-name>, ...];
  transition-duration: <duration-time> [, <duration-time>, ...];
  transition-timing-function: [, <cubic-bezier>, ...];
  transition-delay: [, <duration-time>, ...];

注意：如果任意属性值列表的长度比其他属性值列表要短，则其中的值会重复使用以便匹配。

  div:hover {
    transition-property: opacity, left, top, height;
    transition-duration: 3s, 5s;             /* 注意这里，这里的属性值比上面的列表值短，所以，浏览器将按照下面的样式表解析 */
  }
  
  /* 等同于下面样式声明 */
  
  div:hover {
    transition-property: opacity, left, top, height;
    transition-duration: 3s, 5s, 3s, 5s;   /* 这里 */
  }

相反的，如果某个属性的值列表长于 transition-property 的属性，则将被截短：

  div:hover { 
    transition-property: opacity, left;
    transition-duration: 3s, 5s, 2s, 1s;    /* 注意这里，这里的属性值比上面的列表值长，所以，浏览器将按照下面的样式表解析 */
  }
  
  /* 等同于下面样式声明 */
  
  div:hover {
    transition-property: opacity, left;
    transition-duration: 3s, 5s; 
  }
  

接下来，我们详细介绍 transition 的四种属性：

CSS3 transition-property 属性（第一位属性）

transition-property 是 CSS3 中用来指定过渡效果应用到哪些 CSS 属性上的属性。它允许你明确指定要过渡的属性，从而在元素状态发生改变时仅对指定的属性应用过渡效果，而不是对所有属性都应用过渡效果。

该属性的值可以是 CSS 属性的名称，也可以是关键字 all，表示对所有属性应用过渡效果。

例如，如果你只想在颜色发生变化时应用过渡效果，可以这样写：

.element { transition-property: color; }

这样，当 .element 元素的颜色发生改变时，就会产生过渡效果。

如果想对所有属性都应用过渡效果，可以使用 all 关键字：

.element { transition-property: all; }

这样，无论哪个属性发生变化，都会产生过渡效果。

你也可以同时指定多个属性，以逗号分隔：

.element { transition-property: width, height, opacity; }

CSS3 transition-duration 属性（第二位属性）

transition-duration 是 CSS3 中用来指定过渡效果持续时间的属性。它定义了过渡效果从开始到结束所花费的时间长度，可以使过渡效果更加平滑和自然。

该属性的值可以是秒（s）或毫秒（ms），表示过渡效果的持续时间。可以使用小数值来定义更精确的持续时间。

例如，如果你想让过渡效果持续 1 秒钟，可以这样写：

.element { transition-duration: 1s; }

如果你想让过渡效果持续 500 毫秒，可以这样写：

.element { transition-duration: 500ms; /* 当然 你也可以写 0.5s */ }

你也可以在一个元素上同时应用多个过渡效果，并为每个过渡效果指定不同的持续时间。这可以通过逗号分隔的值来实现：

.element { 
    transition-property: width, height, opacity; 
    transition-duration: 0.5s, 1s, 0.3s; 
}

CSS3 transition-timing-function 属性（第三位属性）* 重要

transition-timing-function 是 CSS3 中用来指定过渡效果的时间函数的属性。它定义了过渡效果在时间上的变化规律，控制了过渡效果的速度曲线，从而影响了元素从开始到结束过渡过程中的动画效果。那种忽快忽慢， 先快后慢，先慢后快的过渡效果，是可以通过它来实现的。当然，你也可以用 @keyframe 定义动画时间比例来实现。

该属性的值可以是下列预定义的时间函数之一：

• ease：默认值，缓慢加速，然后缓慢减速的过渡效果。
• linear：匀速过渡效果。
• ease-in：缓慢加速的过渡效果。
• ease-out：缓慢减速的过渡效果。
• ease-in-out：先缓慢加速，再缓慢减速的过渡效果。
• cubic-bezier(n,n,n,n)：自定义的贝塞尔曲线函数，通过四个值来定义曲线的控制点，分别对应 x1、y1、x2、y2。

CSS3 transition-timing-function 属性语法：

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

如果你想要一个匀速的过渡效果，可以这样写：

.element { transition-timing-function: linear; }

你也可以使用自定义的贝塞尔曲线函数来实现更精细的过渡效果。例如：

.element { transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }

上图通过曲线行驶描绘了几种时间函数的过渡效果。接下来，我们用一组图来具体看看 transition-timing-function 对动画效果的影响。

代码奉上，需要的同学可以下载测试

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<title>transition-timing-function 对动画效果的影响</title>
</head>
<style>
* {
  padding: 0;
  margin: 0;
}
body{
  font-size: 14px;
  padding: 20px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.card {
  display: inline-block;
  margin: 30px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 20px;  
  min-width: 200px;
  width:90%;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.box{  
  width: 20px;
  height: 20px;
  margin-left: 10px;
  border-radius: 5px;
  background: #eee;
  cursor: pointer;
  box-shadow: 0 0 15px #ddd inset;
  transition:width 2s;
}
.box:hover{
    width:1000px;
    background: linear-gradient(90deg, #0f0, #0ff 50%, #0cf 100%, transparent 0);
}
/* 缓动效果 */
.linear{
     transition-timing-function:linear;
}
.ease{
     transition-timing-function:ease;
}
.ease-in{
     transition-timing-function:ease-in;
}
.ease-out{
     transition-timing-function:ease-out;
}
.ease-in-out{
     transition-timing-function:ease-in-out;
}
.cubic-bezier{
     transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1);
}
</style>
<body>
<h1>Css3 transition-timing-function 对动画效果的影响</h1>
<div class="card">
    <div class="box ease"></div>
    <p>ease:缓慢加速，然后缓慢减速的过渡效果</p>
</div>
<div class="card">
    <div class="box linear"></div>
    <p>linear:匀速</p>
</div>
<div class="card">
    <div class="box ease-in"></div>
    <p>ease-in:缓慢加速</p>
</div>
<div class="card">
    <div class="box ease-out"></div>
    <p>ease-out：缓慢减速</p>
</div>
<div class="card">
    <div class="box ease-in-out"></div>
    <p>ease-in-out：先加速后减速</p>
</div>
<div class="card">
    <div class="box cubic-bezier"></div>
    <p>cubic-bezier(0.42, 0, 0.58, 1) 自定义</p>
</div>
</body>
</html>

CSS3 transition-delay 属性（第四位属性）

transition-delay 是 CSS3 中用来指定过渡效果延迟开始的时间的属性。它定义了在元素状态发生改变后，过渡效果开始应用的延迟时间，从而允许你控制过渡效果何时开始执行。

该属性的值可以是秒（s）或毫秒（ms），表示过渡效果的延迟时间。

例如，如果你想在状态改变后等待 0.5 秒后才开始过渡效果，可以这样写：

.element { transition-delay: 0.5s; }

你也可以为每个属性指定不同的延迟时间。例如，如果你想让宽度变化的过渡效果延迟 0.3 秒，而高度变化的过渡效果延迟 0.5 秒，可以这样写：

.element { 
    transition-property: width, height; 
    transition-delay: 0.3s, 0.5s; 
}

好了，说完了CSS 的形变动画 和补间动画，我们改正经的聊一聊 CSS Animation 动画了：

CSS Animation（关键帧动画）

CSS Animation 才算是真正意义上的 CSS3 动画，它具备了对 关键帧和循环次数 的自定义能力。与 CSS Transition 相比较，有如下 CSS 过渡 所不具备的特性：

1. CSS Animation 在实现像 CSS Transition 补间动画 效果时，还可以在起始帧和结束帧之间自定义中间帧，使得动画更加平滑过渡的同时，对动画有了更好的控制和自定义能力。
2. CSS Animation 通过 animation-timing-function: steps() 属性实现了 CSS Transition 无法具备的 逐帧动画 效果
3. CSS Animation 只要定义了结束帧 (即 @keyframes 中的 to)，在首屏渲染时，它默认会以指定元素在动画开始时刻的样式作为起始关键帧，并结合 to 定义的结束关键帧和指定元素的 animation 其他参数来完成补间动画的计算和动画帧的绘制。

一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。

animation 动画，依赖于 CSS @keyframes 规则。要创建 CSS3 动画，你需要了解 @keyframes 规则，W3C在关于 @keyframes 中说明：

• 通过 @keyframes 规则，您能够创建动画。
• 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
• 在动画过程中，您能够多次改变这套 CSS 样式。
• 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
• 0% 是动画的开始时间，100% 动画的结束时间。

Animation的两个必须要素：

定义动画：@keyframe

使用关键帧，先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明进行匹配。每个规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

下面是典型的@keyframe 与 animattion的组合写法：

  /* 定义动画 */
  @keyframes 动画名称 {
    from {
    }
    to {
    }
  }

  /* 等效于下面 @keyframes 规则的定义 */

  @keyframes 动画名称 {
    0% {
    }
    100% {
    }
  }
  
/*调用动画*/
元素:hover{
    animation:动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向;
}

关键帧动画代码说明：

• 0%表示动画的开始，100%表示动画的结束，0%和100%是必须的。一个@keyframes规则可以由多个百分比组成，每一个百分比都可以定义自身的CSS样式，从而形成一系列的动画效果。
• 在使用@keyframes规则时，如果仅仅只有0%和100%这两个百分比，此时0%和100%可以使用关键字from和to来代替，其中0%对应from，100%对应to。

需要注意的事：

1. 定义的动画名称 与 调用动画时 使用的动画名称 必须保持完全一致。
2. 如果多个关键帧使用同一个名称，以最后一次定义的为准 (不存在层叠样式情况下)。
3. 同一关键帧中的相同属性被重复定义，则以最后一次定义的属性为准。

绑定动画：animation:

下面是一个简单的将动画 move 绑定在div 上的语句：

div{
    animation move 2s;
}

创建 CSS 动画序列，需要使用 animation 属性或 其子属性 animation-*，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。

animation是一个复合属性，主要包括6个子属性：

属性	说明	是否必要
animation-name	指定要绑定到选择器的关键帧的名称	是
animation-duration	动画指定需要多少秒或毫秒完成	是
animation-timing-function	设置动画将如何完成一个周期	否
animation-delay	设置动画在启动前的延迟间隔。	否
animation-iteration-count	定义动画的播放次数。	否
animation-direction	指定是否应该轮流反向播放动画。	否
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	否
animation-play-state	指定动画是否正在运行或已暂停。	否

动画名称：animation-name

使用animation-name属性来定义动画调用的是哪一个动画名称，即@keyframes定义的哪一个规则。

语法

animation-name: 动画名;

animation-name调用的动画名需要和@keyframes规则定义的动画名完全一致（区分大小写），如果不一致将不会产生任何动画效果。

持续时间：animation-duration

语法

animation-duration: 时间;

animation-duration属性取值是一个时间，单位为秒（s），可以是小数。

动画方式：animation-timing-function

animation-timing-function语法和属性值

animation-timing-function: 取值;

这里的取值范围，与前面讲的过渡动画的取值大致相同，就不做详细解释了。大家看下面列表，结合前面的内容复习一下就好。

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps(int,start|end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下： start：表示直接开始。 end：默认值，表示戛然而止。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

steps(int,start|end) 在 animation-timing-function子属性的函数中，大部分都是我们见过的。只有steps()，是从前没有见过的，这里，我们对它的作用做一下分享：

这个函数叫做阶梯函数，（其实可能叫步长更贴切）这个函数能够起到定格动画的效果。阶梯函数不像其他定时函数那样，平滑的过渡，而是以帧的方式过渡。steps(int,start|end) 有两个参数：

• number_of_steps ：阶梯数（必须是一个正整数），他将动画的总时长按照阶梯数等距划分
• direction ：可选值为start或end，默认end，也可以不写；start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束；

语法：

{
    /* Keyword values */
    animation-timing-function: step-start;
    animation-timing-function: step-end;

    /* Function values */
    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}

我用下面的例子帮你更清晰的明白 step的作用：

.box,.box2{
  width: 100px;
  height: 30px;
  background: linear-gradient(90deg, #ff6666, #ff99cc 50%, #bb99ff 100%, transparent 0);
  cursor: pointer;
  animation: 3s go infinite;
}
.box2{
  animation: 3s go steps(5) infinite;
}
 @keyframes go  {
   0% {
      width: 10%;
   }
   100% {
      width: 100%;
   }
}

animation-timing-function：steps() 在关键帧动画中的应用：

在 CSS 动画中，使用步骤缓动函数最多的情况是利用其来实现逐帧动画。下面我们尝试做一个奔跑的小孩儿的动画：

在做这个动画之前，我先准备好一张分动作图片。它由8张小孩子的动作图拼合而成（每个图片宽度255像素），形成小孩子奔跑的动作的循环。其实关键帧动画，就是我们小时候在书角上一页一页画的那个小鸟和笼子。当我们把无数定格的图片连贯的播放时候，就形成了动画效果

接下来，我们来通过 animation-timing-function: steps(6) 可以将其用一个 CSS 动画串联起来：

页面布局超简单一句话：

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

CSS代码：

.box {
  width: 255px;
  height: 380px;
  background: url('run.png');
  animation: sprite .8s steps(8, end) infinite;
}
@keyframes sprite {
  0% { 
    background-position: 0 0;
  }
  100% { 
    background-position: -2040px 0;
  }
}

因为我的图片高度是380px，宽度是255x8=2040px。所以，我设定了一个255px*380px的div，给这个 div 赋予了一个 animation: sprite .8s steps(8) infinite 动画；

其中 steps(8) 的意思就是将设定的 @keyframes 动画分为 8次（8帧）执行，而整体的动画时间是 0.8s，所以每一帧的停顿时长为 0.1s；

动画效果是由 background-position: 0 0 到 background-position: -2040px 0，由于上述的 CSS 代码没有设置 background-repeat，所以其实 background-position: 0 0 是等价于 background-position: --2040px 0，就是图片在整个动画过程中推进了一轮，只不过每一帧停在了特点的地方，一共 8 帧；

完成动画效果如下：

延迟时间：animation-delay

语法

animation-delay:时间;

animation-delay属性取值是一个时间，单位为秒（s），可以为小数，其中默认值为0s。

特别注意 animation-delay 可以为负值，也就是说，虽然属性名是动画延迟时间，但是运用了负数之后，动画可以提前进行。

假设我们要实现这样一个 loading 动画效果，有几种思路：

1. 初始 5 个球的位置就是间隔 72°，同时开始旋转，但是这样代码量会稍微多一点
2. 另外一种思路，同一个动画，5 个元素依次触发时机为0s， 1s，2s，3s，4s。

基于第二个思路，我们怎么实现呢？

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

CSS样式和动画实现：

.box{
  width: 30px;
  height: 30px;
  position: absolute;
  top:0px;
  right:0px;
  border-radius: 50%;
  background: #ff99cc;
  box-shadow: inset -6px -3px 10px 0 rgba(255, 0, 128, 0.4);
  transform-origin: 60px center;
}

.box:nth-child(1) {
    animation: rotate 5s infinite linear;
}
.box:nth-child(2) {
    animation: rotate 5s infinite 1s linear;
}
.box:nth-child(3) {
    animation: rotate 5s infinite 2s linear;
}
.box:nth-child(4) {
    animation: rotate 5s infinite 3s linear;
}
.box:nth-child(5) {
    animation: rotate 5s infinite 4s linear;
}

@keyframes rotate {
    to{transform: rotate(1turn);}
}

然而，我们仔细观察动画发现，开始的几秒钟里，几个没有启动的球就停留在那里，没有实现开始时候就旋转。而如果想让他们开始就旋转，就可以使用 animation-delay 的负值 了。让我们试试：

.box:nth-child(1) {
    animation: rotate 5s infinite linear;
}
.box:nth-child(2) {
    animation: rotate 5s infinite -1s linear;
}
.box:nth-child(3) {
    animation: rotate 5s infinite -2s linear;
}
.box:nth-child(4) {
    animation: rotate 5s infinite -3s linear;
}
.box:nth-child(5) {
    animation: rotate 5s infinite -4s linear;
}

这样，在页面加载前，各个小球已经按照设定预先运动了，当页面刷新时候，每个元素都无需等待，直接就是运动状态中的，并且元素间隔位置是我们想要的结果。

播放次数：animation-iteration-count

语法

animation-iteration-count: 取值;

animation-iteration-count属性取值有两种：一种是“正整数”，另一种是“infinite”。当取值为n（正整数）时，表示动画播放n次；当取值为infinite时，表示动画播放无数次，也就是循环播放。

播放方向：animation-direction

语法

animation-direction: 取值;

属性值	说明
normal	正方向播放(默认值)
reverse	反方向播放
alternate	播放次数是奇数时，动画正方向播放;播放次数是偶数时，动画反方向播放

播放状态：animation-play-state

语法

animation-play-state: 取值;

属性值	说明
running	播放（默认值）
paused	暂停

使用起来也非常简单，看下面这个例子：

比如我们前面那个小球运动的动画，我们在它的父元素 hover 的时候，实现动画的暂停：

.card:hover .box{ animation-play-state: paused; }

当我把鼠标移动到card的范围内，小球滚动的动画就停止了。

正常情况下，动画应该是运行状态，那如果我们将一些动画的默认状态设置为暂停，只有当鼠标点击或者 hover 的时候，才设置其 animation-play-state: running，这样就可以得到很多有趣的 CSS 效果。

@keyframes 多个动画效果的写法

如果你想要在一个动画里实现不止一种效果，你可以在同个@keyframes里完成，就像这样：

@keyframes rotate {
    to{
        transform: rotate(1turn);
        opacity: 0.1;
        background: #ffff00;
    }
}
div {
    animation: rotate 2s;
}

/* 上面 三个动画合在一起的写法，等效于下面方法 */

@keyframes rotate {
    to{
        transform: rotate(1turn);       
    }
}
@keyframes fadeIn{
    to{
        opacity: 0.1;       
    }
}
@keyframes changebgcolor{
    to{
        background: #ffff00;        
    }
}
div {
    animation: rotate 2s, fadeIn 2s, changebgcolor 2s;
}

看看我的小球旋转的效果，在旋转的过程中，同时实现了颜色和透明度的改变。

实战示例与注释

1.基础动画示例

示例1：元素淡入淡出

/* 定义名为"fade"的淡入淡出动画 */
@keyframes fade {
  0% { opacity: 0; } /* 开始时元素完全透明 */
  100% { opacity: 1; } /* 结束时元素完全不透明 */
}
​
.fade-element {
  animation: fade 1s ease-in-out 1; /* 淡入淡出动画持续1秒，使用ease-in-out速度曲线，播放1次 */
}

示例2：旋转动画

/* 定义名为"spin"的旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); } /* 开始时元素无旋转 */
  100% { transform: rotate(360deg); } /* 结束时元素旋转360度 */
}
​
.spin-element {
  animation: spin 2s linear infinite; /* 旋转动画持续2秒，匀速播放，无限循环 */
}

2. 进阶动画示例

示例3：多阶段动画

/* 定义名为"multi-stage"的多阶段动画 */
@keyframes multi-stage {
  0%, 50% { background-color: red; } /* 0%至50%期间背景色为红色 */
  50%, 100% { background-color: blue; } /* 50%至100%期间背景色变为蓝色 */
}
​
.multi-stage-element {
  animation: multi-stage 2s linear infinite; /* 动画持续2秒，匀速播放，无限循环 */
}

示例4：动画序列

通过设置不同元素的animation-delay属性，可以创建动画序列：

/* 三个元素分别设置不同的动画延迟 */
.first-element {
  animation: fade 1s ease-in-out 1;
  animation-delay: 0s;
}
​
.second-element {
  animation: fade 1s ease-in-out 1;
  animation-delay: 1s;
}
​
.third-element {
  animation: fade 1s ease-in-out 1;
  animation-delay: 2s;
}

兼容性与注意事项

• CSS动画并非所有浏览器都支持，尤其是较老版本的浏览器。在实际应用中，建议查阅最新的浏览器兼容性表，并可能需要使用浏览器前缀（如-webkit-、-moz-等）确保跨浏览器兼容。
• 动画可能会消耗额外的系统资源，特别是在处理大量动画或复杂动画时。在追求视觉效果的同时，需兼顾性能优化，避免过度使用动画导致页面加载和渲染速度下降。
• 注意动画的用户体验，避免过于频繁或突兀的动画效果干扰用户阅读或操作。合理运用动画，使其成为提升用户体验而非干扰因素。

适用于CSS动画的属性

以下是一些常用于CSS动画的属性：

1. 变形属性（Transform）

• transform: 支持平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等2D/3D变换，这些变换非常适合制作位移、旋转、变形等动画效果。

2. 不透明度属性（Opacity）

• opacity: 控制元素的透明度，常用于实现淡入、淡出等过渡效果。

3. 颜色与背景属性

• color, background-color: 改变文字颜色或背景颜色，用于色彩渐变动画。
• background-position: 适用于背景图平滑移动或切换动画。

4. 边框与阴影属性

• border-radius: 制作元素圆角变化动画。
• box-shadow, text-shadow: 用于阴影效果的动态变化。

5. 其他可动画属性

• width, height: 改变元素尺寸。
• top, right, bottom, left: 动态调整定位元素的位置。
• font-size: 字体大小的变化动画。
• filter: 应用滤镜效果（如模糊、灰度、饱和度等）的动画。

不适用于CSS动画或动画效果受限的属性

有些CSS属性由于其内在特性或性能考虑，不适合或难以用于动画：

1. 显示属性（Display）

• display: 该属性无法平滑过渡，因为它直接控制元素是否显示或隐藏，没有中间状态。若需实现类似效果，可使用opacity配合visibility属性，或者结合max-height与overflow属性模拟元素的淡入淡出或滑动出现/消失。

2. 浮动属性（Float）

• float: 浮动属性本身不具备动画效果，也无法平滑过渡。若需要元素在布局中平滑移动，应使用position结合transform属性。

3. 背景图片替换（Background-image）

• background-image: 直接替换背景图片（如使用新的URL）无法产生动画效果。若需要背景图片连续变化，应使用CSS精灵（CSS Sprites）或CSS变量（CSS Variables）结合background-position实现动画。

4. 一些计算密集型属性

• z-index: 层叠顺序的改变通常不适用于动画，因为其即时生效且没有中间状态。
• content: 在伪元素中，content属性的内容不能进行动画化，因为它不是数值或颜色等可平滑过渡的值。

写在最后：

通过本篇的介绍，相信你已经对CSS动画涉及到的 补间，过渡，关键帧动画都有了一定的理解。也可以亲自动手写一些动画效果了。所话说：实践出真知，心动不如行动，快快打开你的编辑器，动手练起来！相信经过不断的尝试、思考、创意，你一定能在实际项目中展示你自己！加油！吾道不孤！

我发现真正想要一点点码字写教程，即使不是100%原创，也是一件非常费心费力的事情。本文大概3万多字，全部投入时间达到10个小时，所以，昨天只好发了一篇专栏文章，就没有再发，实在是这个长文没有写完。虽然辛苦，但幸好在这个过程中，我也得到了不少收获，温故而知新，学而有所得。希望读到本文的人，也能查漏补缺，有所收获！

本专栏其他文章推荐：

前端必修技能：高手进阶核心知识分享 - CSS 选择器

前端必修技能：高手进阶核心知识分享 - CSS伪类和伪元素

前端必修技能：高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画）

前端必修技能：高手进阶核心知识分享 - CSS 阴影属性详解

前端必修技能：高手进阶核心知识分享 - CSS mix-blend-mode 图片混合模式详解

其他相关文章推荐：

​前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。

CSS技巧：清除浏览器默认样式，让你的页面全由你做主！