11前端css动画

标签：rds   mod   data-   and   相同   UNC   for   eve   效果   

异常兴奋，今天要做一个小动画，fighting

CSS动画

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;} }

11前端css动画

标签：rds   mod   data-   and   相同   UNC   for   eve   效果   

原文地址：https://www.cnblogs.com/muzihuan/p/13212243.html