zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    CF 461B Appleman and Tree
    POJ 1821 Fence
    NOIP 2012 开车旅行
    CF 494B Obsessive String
    BZOJ2337 XOR和路径
    CF 24D Broken robot
    POJ 1952 BUY LOW, BUY LOWER
    SPOJ NAPTIME Naptime
    POJ 3585
    CF 453B Little Pony and Harmony Chest
  • 原文地址:https://www.cnblogs.com/zouwangblog/p/11022116.html
Copyright © 2011-2022 走看看