上一节:
下一节:

  CSS 过渡

  • CSS过渡

    CSS转换允许您在给定的持续时间内平滑地（从一个值到另一个值）更改属性值。

  • 过渡浏览器支持

    表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。
    属性 Internet Explorer Chrome FireFox Safari Opera
    属性格式
    transform 10.0 26.0 4.0-webkit- 16.0 4.0-moz- 6.1 3.1-webkit- 12.1 10.5-o-
    transition-delay 10.0 26.0 4.0-webkit- 16.0 4.0-moz- 6.1 3.1-webkit- 12.1 10.5-o-
    transition-duration 10.0 26.0 4.0-webkit- 16.0 4.0-moz- 6.1 3.1-webkit- 12.1 10.5-o-
    transition-property 10.0 26.0 4.0-webkit- 16.0 4.0-moz- 6.1 3.1-webkit- 12.1 10.5-o-
    transition-timing-function 10.0 26.0 4.0-webkit- 16.0 4.0-moz- 6.1 3.1-webkit- 12.1 10.5-o-

  • 如何使用CSS过渡？

    要创建过渡效果，您必须指定两件事：
    • 要添加效果的CSS属性
    • 效果的持续时间
    注意：如果未指定持续时间部分，则转换将不起作用，因为默认值为0。 以下示例显示了一个100px*100px的orangered <div>元素。还为<div>元素width属性指定了过渡效果，持续时间为2秒： 
    div {
     width: 100px;
     height: 100px;
     background: orangered;
     -webkit-transition: width 2s; /* Safari */
     transition: width 2s;
   }
    当指定的CSS属性（width）更改值时，将开始转换效果。现在，让我们在用户鼠标悬停在<div>元素上时为width属性指定一个新值： 
    div:hover {
     width: 300px;
   }
    尝试一下
    请注意，当光标移出元素时，它将逐渐变回其原始样式。

  • 更改多个属性值

    以下示例为width和height属性添加过渡效果，宽度为2秒，高度为4秒： 
    div {
       -webkit-transition: width 2s, height 4s; /* Safari */
       transition: width 2s, height 4s;
     }
    尝试一下

  • 指定过渡的速度曲线

    transition-timing-function属性指定过渡效果的速度曲线。 transition-timing-function属性可以具有以下值：
    • ease - 指定慢启动的转换效果，然后快速，然后缓慢结束（这是默认值）
    • linear - 指定从开始到结束具有相同速度的过渡效果
    • ease-in - 指定慢启动的过渡效果
    • ease-out - 指定慢速结束的过渡效果
    • ease-in-out - 指定慢速开始和结束的过渡效果
    • cubic-bezier(n,n,n,n) - 允许您在cubic-bezier函数中定义自己的值
    以下示例显示了可以使用的一些不同速度曲线： 
    #div1 {transition-timing-function: linear;}
   #div2 {transition-timing-function: ease;}
   #div3 {transition-timing-function: ease-in;}
   #div4 {transition-timing-function: ease-out;}
   #div5 {transition-timing-function: ease-in-out;}
    尝试一下

  • 延迟过渡效果

    transition-delay属性指定转换效果的延迟（以秒为单位）。以下示例在开始之前有1秒的延迟： 
    div {
     -webkit-transition-delay: 1s; /* Safari */
     transition-delay: 1s;
   }
    尝试一下

  • 转换+转换过程效果

    以下示例还添加了对转换效果的转换： 
    div {
     -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
     transition: width 2s, height 2s, transform 2s;
   }
    尝试一下

  • CSS过渡属性

    下表列出了所有过渡属性：
    属性 描述
    transition 将四个转换属性设置为单个属性的简写属性
    transition-delay 指定转换效果的延迟(以秒为单位)
    transition-duration 指定转换效果完成需要多少秒或毫秒
    transition-property 指定转换效果用于的CSS属性的名称
    transition-timing-function 指定转换效果的速度曲线

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: