11前端css动画
异常兴奋，今天要做一个小动画，fighting
transform
rotate旋转
-
transform-rotate(value) 2D旋转
translate偏移
-
transform-translateX(value) X轴方向偏移value元素
-
父元素为原点
-
正值从左到右
-
value要求是一个绝对元素（px|%|em|rem|vh...）
-
-
transform-translateY(value) Y轴方向偏移value元素
-
父元素为原点
-
正值从上到下
-
value要求是一个绝对元素（px|%|em|rem|vh...）
-
-
transform-translate(xvalue,yvalue) 混合设置，
-
父元素为原点
-
xvalue正值从左到右
-
yvalue正值从上到下，可省略为0
-
value要求是一个绝对元素（px|%|em|rem|vh...）
-
scale缩放
-
transform-scaleX(x) X轴方向缩放
-
中线为原点
-
拉伸x>1 ，缩放x<1
-
value不需要单位
-
-
transform-scaleY(y ) Y轴方向缩放
-
中线为原点
-
拉伸y>1 ，缩放y<1
-
value不需要单位
-
-
transform-scale(x,y) 混合设置，
-
中线为原点
-
x x轴拉伸和缩放
-
y y轴拉伸和缩放，可省略
-
value不需要单位，y可省略，和x等比例缩放
-
skew斜切
-
transform-skewX(x) X轴方向斜切
-
x轴斜切：
-
x为正值逆时针斜切，x为负值顺时针斜切
-
-
transform-skewY(y ) Y轴方向斜切
-
y轴斜切：
-
y为正值顺时针斜切，y为负值逆时针斜切
-
-
transform-skew(x,y) 混合设置，
-
中线为原点
-
x x轴斜切
-
y y轴斜切，可省略值为0
-
rotate3D旋转
-
transform-rotateX(angle) 在x轴旋转
-
transform-rotateY(angle) 在y轴旋转
-
transform-rotateZ(angle) 在z轴旋转
-
transform-rotate3d(x,y,z,angle) 混合旋转，参数不能省略
translate3D偏移
-
transform-translateZ(value) Z轴方向偏移value元素
-
父元素为原点
-
value要求是一个绝对元素（px|%|em|rem|vh...）
-
-
transform-translate3D(x,y,z) 混合设置，
-
父元素为原点
-
value要求是一个绝对元素（px|%|em|rem|vh...）
-
三个值都不能省略
-
scale3D缩放
-
transform-scaleZ(z) z轴方向缩放
-
中线为原点
-
拉伸z>1 ，缩放z<1
-
value不需要单位
-
-
transform-scale3d(x,y,z) 混合设置，
-
中线为原点
-
三个值都不能省略
-
skew3D斜切
-
transform-skewZ(z) Z轴方向斜切
-
z轴斜切：
-
-
transform-skew3d(x,y,z) 混合设置，
-
中线为原点
-
三个值都不能省略
-
transform-origin设置转换元素的原点
-
transform-origin(x,y,z) 原点坐标
transform-style规定元素在3d空间内的呈现效果
-
transform-style(flat|preserve-3d)
-
flat子元素将不保留其 3D 位置
-
preserve-3d子元素将保留其 3D 位置
-
transform-matrix矩阵
-
具体以后单独介绍
perspective 3d图片距离视图的距离
-
perspective(none|number)
-
number元素距离视图的距离
-
none不设置透视
-
perspective-origin 透视点
-
perspective-origin (x,y)
backface-visibility 元素在背面时，是否用户可见
-
backface-visibility (visible|hidden)
transition过渡
transition-property 设置过渡属性
-
transition-property(none|all|property)
-
none所有的属性没有过渡效果
-
all所有的属性都有过渡效果
-
property指定property属性有过渡效果
-
transition-duration 设置过渡时间
-
transition-duration(ms|s)
transition-timing-function 以相同的速度从开始到结束的过渡效果
-
transition-timing-function(linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps())
-
linear匀速过渡
-
ease规定慢速开始，然后变快，然后慢速结束的过渡效果
-
ease-in规定以慢速开始的过渡效果
-
ease-out规定以慢速结束的过渡效果
-
ease-in-out规定以慢速开始、慢速结束的过渡效果
-
transition-delay延时过渡时间
-
transition-duration(ms|s)
transitio混合设置
-
transition(property duration timing-function delay)
animation动画
animation-name 设置动画名称
-
animation-name (keyframename|none)
-
none动画没有名字
-
keyframename 要绑定到选择器的关键帧的名称
-
animation-duration 设置动画时间
-
animation-duration(ms|s)
animation-timing-function 以相同的速度从开始到结束的动画效果
-
animation-timing-function(linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps())
-
linear匀速过渡
-
ease规定慢速开始，然后变快，然后慢速结束的过渡效果
-
ease-in规定以慢速开始的过渡效果
-
ease-out规定以慢速结束的过渡效果
-
ease-in-out规定以慢速开始、慢速结束的过渡效果
-
animation-delay延时动画时间
-
animation-duration(ms|s)
animation-iteration_count动画循环次数
-
animation-duration(infinite|number)
-
infinite无限次
-
number指定次数
-
animation-direction动画在重复中是否反向
-
animation-direction(normal|reverse|alternate|alternate-reverse)
animation-fill-mode动画结束后的状态
-
animation-fill-mode(none|fowards|backwards|both)
animation
-
animation(混合参数如上)
keyframes 逐步从一个css样式过渡到另一个css样式
-
keyframe-selectors必需的。动画持续时间的百分比。
-
0-100%|from (和0%相同) to (和100%相同)
@keyframes mymove{ from {top:0px;} to {top:200px;} }
-
