css动画

Posted on In , ,

transform

  • transform:translate(负左正右，上下移动):可以放入单位、百分比（参照元素自身）
  • transform:rotate(xxx):旋转，默认中心原点
  • transform-origin: xxx xxx:切换原点
  • transform:scale(xxx):缩放大小，两参数（宽高），默认中心原点
  • transform:skew(xxx xxx):一个参数水平移动（角度），两参数（水平和锤子）
  • transform:matrix(a,b,c,d,e,f):ad：缩放，bc：倾斜（斜切）、ef：元素平移

    有设计软件，可以直接导出设置

    transition

    https://juejin.cn/post/6970885478967050254

transition: <property(需要过渡的属性)> <duration(过渡的时长)> <timing-function(缓动函数)> <delay(开始延迟时间)>;

缓动函数：

贝塞尔函数

  • ease：动画以低速开始，然后加快，在结束前变慢。
  • ease-in：指数函数
  • ease-out：log函数
  • ease-in-out：慢开始加速后又慢
  • cubic-bezier(n,n,n,n) 贝塞尔曲线（自定义数值）

线性函数

linear()
折线

  • linear：固定时间
  • linear(0,0.25,1):开始较慢，后面突然加快

阶跃

step(<>)
step(2,end):分两次跳跃

A