css3转换，过渡，动画效果知识点汇总

CSS3知识点
1.Transform（转换）—-对元素进行移动、缩放、转动、拉长或拉伸。
兼容性：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9 需要前缀 -ms-。
2D转换
1) translate(x,y) –移动 （x轴：右正左负；y轴：下正上负）
例子：transform: translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
2) rotate(ndeg) —旋转 （正顺负逆）
将一个元素旋转30度代码：
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

3) scale() –缩放
例子：transform: scale(2,4);把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
4) skew() –倾斜（x轴：正左倒 负右倒 y轴：正 上 负下）
例子：transform: skew(30deg,20deg);围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
5) matrix()
3D转换–x,y,z 多了一个z轴
属性：perspective (放置在父元素上)
含义：3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
兼容性：Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-;Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

2.Transition（过渡）–为元素从一种样式变换为另一种样式时添加效果
用法：transition: width 2s; 若多个效果，由逗号隔开，如:transition: width 2s, height 2s, transform 2s;
这过渡效果一般和事件发生时发生 比如初始值width：50px；当元素hover 时候，宽度变为150px，然后他将宽度由50px变到150px通过2s来过渡实现
Transition 4个属性：
transition-property :名称
transition-duration :时长 默认：0
transition-timing-function：时间曲线 ：默认：ease
值：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)自定义 （0,1）的值
transition-delay :何时开始：默认：0
简写：
transition: width 1s linear 2s;
兼容性：
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。
3.Animation（动画）
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
两种方式：
方式一：from to
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
方式二：百分比
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
把动画绑定到某个元素(必备：名称和时长)
.className{
animation: myfirst 5s;
}
Animation：
属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。无限次播放 infinite
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。轮流反向播放：alternate
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。暂停：paused
animation-fill-mode 规定对象动画时间之外的状态。
None：不改变默认行为。
Forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
Backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
Both：向前和向后填充模式都被应用。

简写：animation: myfirst 5s linear 2s infinite alternate;
兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。