• 过渡


    一、基本概念

    在css3引入transition这个概念之前,css是没有时间轴的,也就是说,所有的动画效果,都是即时完成。

    比如这里:

    html代码:

    <img src="dog.jpg">

    css代码:

    img{
        width: 200px;
        height: 200px;
    }
    img:hover{
        width: 400px;
        height: 400px;
    }

    这里我鼠标移入图片上时,图片会立即变大,整个过程瞬间完成。

    二、语法

    transition: property duration timing-function delay;

    2.1、property  和 duration

    这俩个规定设置过渡效果的css属性的名称和持续的时间,property可以设置准确的值(width、height...)或者all,该值表示所有都将获得过渡效果。duration可以设置确切的秒数。

    img{
        width: 200px;
        height: 200px;
        transition: width 1s,height,1s; // transition: all 1s;也可实现
    }

    上面代码在后面加了过渡属性,现在整个变化过程是平滑的,持续1s时间

     

    2.2、timing-function

    这个属性规定了速度效果的速度曲线,有以下6个值:

    • linear  匀速
    • ease  慢速开始,然后变快,最后变慢  (默认值)
    • ease-in  慢速开始
    • ease-out 慢速结束
    • ease-in-out  慢速开始和结束
    • cubic-bezier(n,n,n,n)  在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
    transition: all 1s linear;

    上面代码新增了timing-function属性,并赋值为linear,这样整个过渡,将会在一秒钟内匀速完成。

    2.3、delay

    这个属性定义过渡效果何时开始,可以设置具体的秒数来延迟执行。

    transition: all 1s linear 1s;

    上面代码新增了1秒钟的延迟,整个过渡一秒钟后,将会在一秒钟内匀速完成。

    三、补充

    3.1、简写方式,上面其实都是简写方式,也可以分解成:

    img{
        width: 200px;
        height: 200px;
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 1s;
    }
    img:hover{
        width: 400px;
        height: 400px;
    }

    3.2、前缀

    ie10+、firefox、chrome、opera支持transition属性,safari浏览器需要添加 -webkit- 前缀。

    3.3、支持属性

    不是所有的css属性都支持过渡,完整的列表查看这里 http://oli.jp/2010/css-animatable-properties/,还有具体的效果 http://leaverou.github.io/animatable/。

    3.4、注意点

    transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态,比如,高度从0px到100px,但是如果从auto到100px,则不会产生动画效果,类似的效果还有display:none到dispaly:block,background: url(foo.jpg)到url(bar.jpg)等等。

    3.5、局限性

    • 需要事件触发,没法在网页加载时,自动发生
    • transition是一次性的,不能重复发生,除非一再触发
    • transition只能定义开始状态和结束状态,不能定义中间状态。
  • 相关阅读:
    linux查看tomcat下记录
    jstatd error
    你不来,我不敢老去
    解决forward后资源加载失败的问题
    SSL安装 tomcat jks AVR
    浅谈Class Activation Mapping(CAM)
    oracle大牛博客
    Oracle函数translate()的用法
    oralce函数nullif使用
    总结优化索引的规则
  • 原文地址:https://www.cnblogs.com/xlj-code/p/6108286.html
Copyright © 2020-2023  润新知