过渡 transition

实验网站

选择参数值: CSS Transition Generator | MakingCSS

专业运动函数: CSS Easing Animation Tool - Matthew Lein

官方文档: transition | MDN

规则

transition: 过渡属性 持续时间 运动函数 延时;

用于对 平面元素 做 属性变化的过渡

参数

• 过渡属性(-property)

  • 意义：规定了想要过渡的属性
  • 例子：
    • all <==> 所有 变化的 能过渡属性，都要过渡
    • width <==> 只对 宽度变化 过渡
    • opacity <==> 只对 透明度变化 过渡
    • transform <==> 只对 矩阵变换变化 过渡(参考上一篇)
    • 其他取值(有数值、能计算中间态的都可尝试)
      • background 背景色
      • border-radius 圆角
      • box-shadow 阴影
      • text-shadow 文字阴影

• 持续时间(-duration)

  • 意义: 整个过渡 持续的时间
  • 单位：ms或者s
  • 例子
    • 500ms <==> 半秒就完成过渡
    • 3s <==> 三秒才完成过渡

• 运动函数(-timing-function)

  • 意义: 过渡时遵循的 速度-时间 函数曲线
  • 例子
    • ease <==> 默认值，开始慢 中间快 结束慢
    • linear <==> 全程匀速
    • ease-in <==> 开始进入时慢，结束快
    • ease-out <==> 开始快，结束出来时慢
    • ease-in-out <==> 开始慢，结束也慢
    • cubic-bezier(a,b,c,d) <==> 自定义4个值

• 延时(-delay)

  • 单位：ms或者s
  • 意义: 过渡被触发后的 延迟时间
  • 例子
    • 1s <==> 触发一秒后才开始过渡

• 进阶技巧

  • 若每四个为一组，可用逗号分隔从而支持多组动画
    • 配合延时可以让多组动画接连发生
  • 也可四个单独形成四行属性，属性名为transition-xxx的格式
    • 其中-xxx取值参照上面每个属性的括号内容

例子

.block {
  width: 100px;
  height: 100px;
  opacity: 1;
  transition:
    opacity 0.5s ease 0s,
    width 800ms ease-in 0.5s;
}

.block:hover {
  opacity: 0;
}

• 这里.5s是缩写，意思是: 0.5s

• 过渡一般可结合:hover伪类实现

  • 在div普通状态中定义“被操作属性: 原值”，并在普通状态内配好过渡的4属性(后2个可省略，默认为ease 0)
  • 在div:hover中定义“被操作属性: 终点值”
  • 两个区别
    • 如果 在普通状态内 配置 过渡4属性
      • 移入和移出都会有过渡效果
    • 如果 在:hover内 配置 过渡4属性
      • 仅hover移入时有过渡效果，移出时就没效果

兼容性前缀

transition:
-webkit-transition:
-moz-transition:
-o-transition: