动画
一、过渡
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
transition：过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
示例：
.main{
position: absolute;
left: 0;
top: 0;
transition: opacity 4s; /*透明度的过度时间为4秒*/
}
.main:hover{
opacity: 0; /*鼠标移入时的图片透明度为0*/
}
注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。
效果开始于指定的 CSS属性改变值时。CSS属性改变的典型时间是鼠标指针位于元素上时：
transition 属性是一个简写属性，用于设置四个过渡属性：
1、 transition-property ：规定设置过渡效果的css属性的名称
默认值为all，所有属性都将获得过渡效果，一般也只用这个。
2、transition-duration ：规定完成过渡效果需要多少秒或毫秒。
时间，默认值为0
3、transition-timing-function ：规定速度效果的速度曲线。
默认值为ease
其他取值：
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
linear ：规定以相同速度开始至结束的过渡效果
4、transition-delay ：定义过渡效果何时开始。
默认值为0
二、动画
CSS3 @keyframes 规则
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长
@keyframes mylast{
0% {background: red;left: 0;top:0;}
25%{background: green;left: 300px;top: 0;}
50%{background: yellow;left: 300px;top: 300px;}
75%{background:black;left: 0;top: 300px; }
100%{background: orange;left: 0;top: 0;}
}
.test{
width: 100px;
height: 100px;
background: gray;
position: relative;
animation: mylast 1s infinite 0.1s alternate;
}
@keyframes 用来创建动画名称
animation 用在元素上来应用创建的名称
animation 属性是一个简写属性，用于设置六个动画属性：
1、 animation-name ：规定需要绑定到选择器的 keyframe 名称。。
2、 animation-duration ：规定完成动画所花费的时间，以秒或毫秒计。
3、 animation-timing-function ：规定动画的速度曲线。
linear 动画从头到尾的速度是相同的
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
4、 animation-delay ： 规定在动画开始之前的延迟。
5、 animation-iteration-count ：规定动画应该播放的次数。
数值：
infinite：规定动画应该无限次播放。
6、 animation-direction ：规定是否应该轮流反向播放动画。
normal：默认值。动画应该正常播放。
alternate ：动画应该轮流反向播放。
示例
@keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
div {
width:100px;
height:100px;
background:red;
position:relative;
/* 规定需要绑定到选择器的keyframe名称 */
animation-name:myfirst;
/* 规定动画所花费的时间以秒或毫秒 */
animation-duration:5s;
/* 规定动画的速度曲线 */
animation-timing-function:linear;
/* 规定动画开始之前的延迟 */
animation-delay:2s;
/* 规定动画要播放的次数 */
animation-iteration-count:infinite;
/* 规定是否应该轮流方向播放动画 */
animation-direction:alternate;
}
三、2D转换
2D转换方法
translate()
rotate()
scale()
skew()
matrix()
1、translate() 方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
示例：
transform: translate(50px,100px); 把元素从左侧移动 50 像素，从顶端移动 100 像素。
2、rotate() 方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
示例：
transform: rotate(30deg); 把元素顺时针旋转 30 度。
3、scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
示例：
```
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
```
4、skew() 方法
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
示例：
transform: skew(30deg,20deg); 值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
CSS3 transform-origin 属性
transform-origin :设置旋转元素的基点位置
示例：
div
{
transform: rotate(45deg);
transform-origin:20% 40%;}
语法：transform-origin: x-axis y-axis z-axis;
1、x-axis：
定义视图被置于 X 轴的何处。可能的值：
eft
center
right
length
%
2、y-axis
定义视图被置于 Y 轴的何处。可能的值：
top
center
bottom
length
%
3、z-axis
定义视图被置于 Z 轴的何处。可能的值：
length
四、3D转换
3D转换方法
1、rotateX()
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
2、rotateY()
rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
perspective(n) 定义 3D 转换元素的透视视图。
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
值：
number 元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。
