动画：animation
过渡：transitiontransition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
transition 包括以下属性：
transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
上面的四个属性也可以写成综合属性：
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;其中，transition-property这个属性是尤其需要注意的，不同的属性值有不同的现象。我们来示范一下。
如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。效果如下：
如果设置 transition-property: all，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡。效果如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 过渡</title>
<style>
body {margin:0;padding:0;background-color:#eeeeee;}.content{width:800px;height:320px;padding-left:20px;margin:80pxauto;}.item{width:230px;height:300px;text-align:center;margin-right:20px;background-color:#FFF;float:left;position:relative;top:0;overflow:hidden;/* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */transition: all .5s;/* 从最初到鼠标悬停时的过渡 */}.item img {margin-top:30px;}.item.desc{position:absolute;left:0;bottom:-80px;width:100%;height:80px;background-color:#ff6700;transition: all .5s;}/* 鼠标悬停时，让 item 整体往上移动5px，且加一点阴影 */.item:hover{top:-5px;box-shadow:0015px#AAA;}/* 鼠标悬停时，让下方的橙色方形现身 */.item:hover.desc{bottom:0;}</style>
</head>
<body>
<div>
<div>
<img src="https://www.linuxidc.com/Linux/2018-02/images/1.png" alt="">
</div>
<div>
<img src="https://www.linuxidc.com/Linux/2018-02/images/2.png" alt="">
<span></span>
</div>
<div>
<img src="https://www.linuxidc.com/Linux/2018-02/images/3.jpg" alt="">
<span></span>
</div>
</div>
</body>
</html>
效果如下：
动画效果录制的比较差，但真实体验还是可以的。
工程文件：
2018-02-08-小米商品详情过渡（下载见本文最后）
2D 转换转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。
转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。
2D转换包括：缩放、移动、旋转。
我们依次来讲解。
1、缩放：scale格式：
transform: scale(x, y);
transform: scale(2, 0.5);
参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
取值：大于1表示放大，小于1表示缩小。不能为百分比。
格式举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.box{width:1000px;margin:100pxauto;}.box div {width:300px;height:150px;background-color: pink;float:left;margin-right:15px;color:white;text-align:center;font:40030px/150px “宋体”;}.box.box2{background-color:green;transition: all 1s;}.box.box2:hover{/*width: 500px;*//*height: 400px;*/background-color: yellowgreen;/* transform: css3中用于做变换的属性 scale(x,y)：缩放 */transform: scale(2, 0.5);}</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
效果：
上图可以看到，给 box1 设置 2D 转换，并不会把兄弟元素挤走。
2、位移：translate格式：
transform: translate(水平位移, 垂直位移);
transform: translate(-50%, -50%);
参数解释：
参数为百分比，相对于自身移动。
正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
格式举例：