• CSS transition 过渡 详解


    transition 过渡

    IE10、Firefox、Chrome、Opera 支持 transition 属性。

    Safari 需要前缀 -webkit-。

    Chrome 25 以及更早版本需要前缀 -webkit-。

    IE9 以及更早版本不支持 transition 属性。

    过渡属性

    【1】transition-property

    规定应用过渡效果的 CSS 属性的名称(当指定的CSS属性改变时,过渡效果开始),其默认值为 all 。

    【2】transition-duration

    规定完成过渡效果需要的时间(单位为 s 或 ms),其默认值为 0s ,意味着如果不指定这个属性,将不会呈现过渡效果。

    【3】transition-timing-function

    规定过渡效果的时间曲线。

    默认 ease :慢速开始,中间变快,慢速结束;相当于 cubic-bezier(0.25, 0.1, 0.25, 1)。

    可选 liner:匀速运动;相当于 cubic-bezier(0, 0, 1, 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):在 bezier 函数中自定义 0 ~ 1 之间的数值。

    贝塞尔时间曲线详解。。。

    【4】transition-delay

    规定过渡效果的延迟时间,默认为 0s 。

    复合属性

    在使用复合属性定义过渡效果时,子属性之间用空格分隔。

    transition: width 2s linear;

    transition 属性可以指定多个值,当指定多个值时,中间用逗号分隔。

    transition: width 2s ease-in-out, height 2s ease-in-out;

    过渡阶段

    【1】过渡分为两个阶段:前进(forward)和反向(reverse)。

    【2】若前进阶段还未完成就进入反向阶段,则反向阶段的初始值为前进阶段结束时的瞬时值。

    【3】以 :hover 伪类为例,如果在非 hover 状态下设置了 transition 属性,相当于设置了反向状态,此时前进和反向是一致的。

    #test {
        width: 100px;
        height: 100px;
        background-color: cyan;
        transition: width 2s, height 2s;
    }
    
    #test:hover {
        width: 300px;
        height: 300px;
    }

    这段代码意味着,当鼠标悬浮时,将 width 变为 300px,将 height 变为300px,过渡时间为 2s;当鼠标离开时,将 width 变为 100px,将 height 变为 100px,过渡时间为 2s。

    但是如果在 hover 状态下也设置了 transition 属性,则 hover 状态下的为前进状态,非 hover 状态下的为反向状态。

    #test {
        width: 100px;
        height: 100px;
        background-color: cyan;
        transition: width 2s, height 2s;
    }
    
    #test:hover {
        width: 300px;
        height: 300px;
        transition: width 5s, height 5s;
    }

    这段代码意味着,当鼠标悬浮时,将 width 变为 300px,将 height 变为300px,过渡时间为 5s;当鼠标离开时,将 width 变为 100px,将 height 变为 100px,过渡时间为 2s。

    注意:在 hover 状态下设置 transition 属性时,明确哪些属性需要过渡,而哪些属性不需要过渡。

    【4】当子元素和父元素过渡属性一致:若触发子元素过渡时,父元素正在过渡,则将父元素过渡的中间态的值作为子元素过渡的初始值;同理,若子元素过渡并未完成就开始父元素的过渡,则将子元素过渡的中间态的值作为父元素过渡的初始值。

    #box:hover {
        font-size: 48px;
        transition: font-size 3s;
    }
    
    #test:hover {
        font-size: 48px;
        transition: font-size 10s;
    }

    需要注意的是:当子元素与父元素过渡属性一致,但是过渡时间不一致的时候,如上面这段代码,子元素的过渡时间为 10 秒,父元素的过渡时间为 3 秒,当鼠标悬浮在子元素上时,呈现的是子元素的过渡效果,但是父元素的过渡时间也在开始计算;当子元素上过渡进行了 2 秒,此时将鼠标移入父元素,进行父元素的过渡时,这个属性的过渡时间就只有 1 秒。

    【5】当需要过渡的属性初始值为 auto 时,不会进行过渡。

    #test {
        width: 100px;
        height: 100px;
        margin: 30px auto;
        background-color: cyan;
    }
    
    #test:hover {
        transition: margin-left 5s;
        margin-left: 500px;
    }

    【6】隐式过渡,是指一个属性的改变引起另一个属性的改变。

    #box {
        width: 300px;
        height: 300px;
        border: 1em solid black;
    }
    
    #box:hover {
        font-size: 48px;
        transition: font-size 3s;
    }

    当 font-size 改变时,border 的宽度也会跟着改变。

    Firefox 和 IE 支持隐式过渡。

    参考:

    深入理解 CSS 过渡 transition

  • 相关阅读:
    【转】如何将qlv格式的腾讯视频转换为mp4格式
    【转】qlv文件如何转换成mp4 怎样把下载好的qlv格式视频转换成MP4格式
    PCIe事务层包TLP Header详解
    PCIeのType0与Type1型配置请求与BAR(基地址寄存器)
    PCIeの数据链路层与物理层详解
    PCIe事务层の详解(一)
    PCIe基础篇(二)、协议详解
    PCIe基础篇(一)、基础知识扫盲
    UDP千兆光通信(一)、整体认知与概述
    Xilinx源语-------FDRE
  • 原文地址:https://www.cnblogs.com/cc156676/p/5785112.html
Copyright © 2020-2023  润新知