标签：一个 高度 ase 空间 spec 默认 曲线 前缀 持续时间
浏览器内核
谷歌 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转换元素的透视视图
标签：一个 高度 ase 空间 spec 默认 曲线 前缀 持续时间
原文地址：https://www.cnblogs.com/panghexin/p/10554905.html
