过渡模块

使用CSS3过渡可以通过改变CSS属性来创建动画。当多个属性需要同时执行过渡效果时用逗号隔开。

div
{
    width: 100px;
    height: 50px;
    background-color: red;
    /*告诉系统哪个属性需要执行过渡效果*/
    transition-property: width, background-color;
    /*告诉系统过渡效果持续的时长*/
    transition-duration: 5s, 5s;
}
/*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
div:hover
{
    /*告诉系统最终变更属性的结果*/
    width: 300px;
    background-color: blue;
}

过渡三要素

  • 必须要有属性发生变化
  • 必须告诉系统哪个属性需要执行过渡效果
  • 必须告诉系统过渡效果持续时长

过渡属性

  • transition：用于设置四个转换属性的简写属性（简写）
  • transition-delay：指定过渡效果何时开始（填写时间）
  • transition-duration：指定完成转换所需的秒数或毫秒数（填写时间）
  • transition-property：指定转换所用的CSS属性的名称
  • transition-timing-function：指定转换的速度曲线

transition简写

语法

transition: property duration timing-function delay;

注意点

  • 过渡连写注意点
  • 和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
  • 连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
  • 如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为transition:all 0s;

transition-timing-function

  • linear：规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
  • ease:规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
  • ease-in:规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）。
  • ease-out:规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）。
  • ease-in-out:规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）。
  • cubic-bezier(n,n,n,n):在cubic-bezier 函数中定义自己的值。可能的值是0至1之间的数值。

技巧套路

  1. 不要管过渡,先编写基本界面
  2. 修改我们认为需要修改的属性
  3. 再回过头去给被修改属性的那个元素添加过渡即可
  • ul li:hover是监控鼠标进入li范围，ul:hover li是监听鼠标进入ul范围；前者更加具体，优先级更高

参考资料

「李南江」HTML+CSS 基础入门教程全套视频|HTML5+CSS3基础+案例

W3Cschool：CSS3 过渡

赏