一、CSS3 动画特性
在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。
CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何 Flash 或 JavaScript 脚本代码。过渡与动画的出现，使 CSS 在 Web 前端开发中不再仅仅局限于简单的静态内容展示，而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化。
二、CSS3 优势
1. 减少开发成本与维护成本
在 CSS3 出现之前，开发人员为了实现一个圆角效果，往往需要添加额外的HTML标签，使用一个或多个图片来完成，而使用CSS3 只需要一个标签，利用 CSS3 中的 border-radius 属性就能完成。这样，CSS3 技术能把人员从绘图、切图和优化图片的工作中解放出来。如果后续需要调整这个圆角的弧度或者圆角的颜色，使用 CSS2.1，需要从头绘图、切图才能实现，使用 CSS3 只需修改 border-radius 属性值就可快速完成修改。
CSS3 提供的动画特性，可让开发者在先实现一些动态按钮或者动态导航时远离 JavaScript，让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。
2. 提高页面性能
很多 CSS3 技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行 Web 开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。另外，更少的图片、脚本和 Flash 文件能够减少用户访问 Web 站点时的 HTTP 请求数，这是提升页面加载速度的最佳方法之一。而使用 CSS3 制作图形化网站无需任何图片，极大地减少了 HTTP 的请求数量，并且提升了页面的加载速度。例如 CSS3 的动画效果，能够减少对 JavaScript 和 Flash 文件的 HTTP 请求，但可能会要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢致使用户流失。因此，在使用一些复杂的特效时需要考虑清楚。其实很多 CSS3 技术能够在任何情况下都大幅提高页面的性能 [52] 。
CSS3 将完全向后兼容，所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持 CSS2 。
三、实例
实例入口：3D Animal
CSS样式结构
:root{
height: 100%; // DOM根节点 html高度
}
body{
height: 100%;
margin: 0;
perspective: 2000px; // 规定 3D 元素的透视效果（景深）
perspective-origin: center 100px; // 规定 3D 元素的底部位置
transform-style: preserve-3d; // 所有子元素在3D空间中呈现
}
.father{
width: 300px;
height: 300px;
position: absolute;
top: calc(50% - 150px); // father 页面垂直居中
left: calc(50% - 150px); // father 页面水平居中
transform-style: preserve-3d; // 规定被嵌套元素如何在 3D 空间中显示
transform-origin: 0 0; // 允许你改变被转换元素的位置（定义父容器坐标原点）
/**
* @ Animationl 动画
* 属性：animation-*
* 属性值：value
* animation-name：Name; 动画对象名
* animation-duration：Time; 动画时长
* animation-timing-function：Linear; 动画切换方式
* animation-delay：Time; 延迟执行时间
* animation-iteration-count：Inf; 循环方式 次数/无限循环
* animation-direction：Normal; 首尾间运行方式 交替/反向
*
* @ animation 简写方式
* animation: name duration timing-function delay iteration-count direction;
*/
animation: Run 6s linear infinite alternate;
}
.contain{
width: 300px;
height: 300px;
position: absolute;
background-size: cover;
border-radius: 10px; // 圆角
opacity: .5; // 透明度
}
/**
* @ Transform 向元素应用 2D 或 3D 转换
* 旋转：rotateX(angle) 定义沿 X 轴的 3D 旋转。
* rotateY(angle) 定义沿 Y 轴的 3D 旋转。
* rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
* 缩放：scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值
* scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值
* scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值
* 平移：translateX(x) 定义 3D 转化，仅使用用于 X 轴的值
* translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值
* translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值
*/
.contain:nth-of-type(1){
background-image: url(img/scene1.png);
transform: rotateY(0deg) translateZ(150px);
}
.contain:nth-of-type(2){
background-image: url(img/scene3.png);
transform: rotateY(90deg) translateZ(150px);
}
.contain:nth-of-type(3){
background-image: url(img/scene1.png);
transform: rotateY(180deg) translateZ(150px);
}
.contain:nth-of-type(4){
background-image: url(img/scene3.png);
transform: rotateY(270deg) translateZ(150px);
}
.contain:nth-of-type(5){
background-image: url(img/scene4.png);
transform: rotateX(90deg) rotateZ(180deg) translateZ(150px);
}
.contain:nth-of-type(6){
background-image: url(img/scene4.png);
transform: rotateX(270deg) translateZ(150px);
}
/**
* @keyframes 创建动画，把它绑定到一个选择器
* 规定变化发生的时间：
* 1. 用关键词 "from" 和 "to"，"from"是动画的开始，"to" 是动画的完成
* 2. 0% 是动画的开始，100% 是动画的完成。
* 为了得到最佳的浏览器支持，推荐使用 0% —— 100% 选择器
*/
@keyframes Run{
0%{
transform: rotateY(0deg) rotateX(180deg);
}
50%{
transform: rotateY(180deg) rotateX(360deg);
}
100%{
transform: rotateY(360deg) rotateX(0deg);
}
}
html 主体
<div class="father"> // 父容器 father
<div class="contain"></div> // 立方体各面 contain
<div class="contain"></div>
<div class="contain"></div>
<div class="contain"></div>
<div class="contain"></div>
<div class="contain"></div>
</div>
~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~
