11前端css动画

异常兴奋,今天要做一个小动画,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;} }

 

 

posted @ 2020-06-30 10:18  muzihuan  阅读(106)  评论(0编辑  收藏  举报