浏览器内核

谷歌  Webkit     火狐  Gecko    IE  Trident

国内的浏览器内核都是Webkit

CSS3的兼容性

CSS3针对同一样式在不同浏览器的兼容，需要在样式的属性上加内核前缀

谷歌  -webkit-transtion：

Opear  -o-transtion：

Firefox  -moz-transtion：

IE  -ms-transtion：

CSS3中的过渡属性 transition

transition 简写属性，用于在一个属性中设置四个过渡属性

eg：transition：width  2s  linear  1s;

transition-property   规定应用过渡的css属性名称

transition-duration   定义过渡效果花费的事件，默认时间是0

transition-timing-function  规定过渡效果的时间曲线，默认是'ease'

transition-delay   规定过渡效果何时开始，默认是0

注意：时间一定要带单位

CSS3动画  animate

挡在@Keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果

（1）规定动画的名称

（2）规定动画的时长

注意：如果省略持续时间，动画将无法运行，因为默认值是0

复制代码
 1 div{
 2         width: 100px;
 3         height: 100px;
 4         background: red;
 5         animate: move  5s;
 6 }
 7 @Keyframes   move{
 8         from{
 9             background:red;
10        }
11       to{
12             background:pink;
13      }
14 }
15 
16
复制代码

CSS3动画的属性

animate   所有动画的简写属性，除了animate-play-state属性

@Keyframes  规定动画

animate-name  规定@Keyframe动画的名称

animate-duration  规定动画完成一个周期所花费的秒或毫秒，默认是0

animate-timing-function  规定动画的速度曲线，默认是"ease"

animate-fill-mode  规定当动画不播放时，要应用到的元素的样式

animate-delay  规定动画何时开始，默认是0

animate-iteration-count  规定动画被插入的次数，默认是1

animate-direction  规定动画是否在同一周期逆向播放，默认是"normal"

animate-plat-state  规定动画是否正在运行或暂停，默认是"running"

2D、3D转换属性

transfrom  向元素应用2D或3D转换

transform-orgin  允许你改变被转换元素的位置

transform-style  规定被嵌套元素如何在3D空间中显示

值：flat  表示所有子元素在2D平面呈现

　　preserve-3d  表示所有子元素在3D空间中显示

perspective  规定了3D元素的透视效果

perspective-origin  规定了3D元素底部的位置

perspective-visibility  定义元素在不面对屏幕时是否出现

2D转换方法

matrix（n1，n2，n3，n4，n5，n6）  定义2D转换，使用六个值得矩阵

translate（x，y）  定义2D转换，沿着x和y轴移动的元素

translateX（x）  定义 2D转换，沿着x轴移动

translateY（y）定义2D转换，沿着y轴移动

scale（x，y）定义2D缩放转换，改变元素的宽度和高度

scaleX（n）  定义2D缩放转换，改变元素的宽度

scaleY（n）   定义2D缩放转换，改变元素的高度

rotate（angle）  定义2D转换，在参数中规定角度

skew（x-angle，y-angle）  定义2D倾斜转换，沿着x轴和y轴

skewX（x） 定义2D的倾斜转换，沿着x轴

skewY（y）  定义2D的倾斜转换，沿着y轴

3D转换方法

matrix（n1，n2，n3，n4，n5，n6......n16）  定义3D转换，使用十六个值得4*4的矩阵

rotate3d（x，y，z，angle）定义3D旋转

rotateX（x） 围绕其在一个给定度数x轴旋转的元素

rotateY（y） 围绕其在一个给定度数y轴旋转的元素

rotateZ（z） 围绕其在一个给定度数z轴旋转的元素

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轴的值

perspective（n）  定义3D转换元素的透视视图