• 技术文章 >web前端 >前端问答

    css3过渡采用什么属性

    青灯夜游青灯夜游2022-01-13 15:46:56原创94

    css3过渡采用的属性有:1、transition;2、transition-property;3、transition-duration;4、transition-timing-function;5、transition-delay。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

    要实现这一点,必须规定两项内容:

    通过过渡transition属性,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果,要实现这一点,必须实现一项内容,即指定效果的持续时间。

    css3过渡属性

    属性描述CSS
    transition简写属性,用于在一个属性中设置四个过渡属性。3
    transition-property规定应用过渡的 CSS 属性的名称。3
    transition-duration定义过渡效果花费的时间。默认是 0。3
    transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
    transition-delay规定过渡效果何时开始。默认是 0。3

    复合属性

    过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0。其中,<transition-duration>和<transition-delay>都是时间。当两个时间同时出现时,第一个是<transition-duration>,第二个是<transition-delay>;当只有一个时间时,它是<transition-duration>,而<transition-delay>为默认值0

    transition: <transition-property> || <transition-duration> || 
    <transition-timing-function> || <transition-delay>

    [注意]transition的这四个子属性之间不能用逗号隔开,只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值,多值部分稍后介绍);而空格隔开的代表不同属性的四个关于过渡的子属性。

            .test {
                border: 1px solid red;
                width: 100px;
                height: 50px;
                transition: 2s;/*代表持续时间为2s,延迟时间为默认值0 */
                /* transition: 1s 2s; 代表持续时间为1s,延迟时间为2s */
            }
            .test:hover {
                width: 300px;
            }
        <div class="test"></div>

    1.gif

    相关子属性

    1、transition-property

    transition-property属性指定CSS属性的nametransition效果(transition效果时将会启动指定的CSS属性的变化)。none: 没有指定任何样式,all: 默认值,表示指定元素所有支持transition-property属性的样式。<transition-property>: 可过渡的样式,可用逗号分开写多个样式。

    注意:始终指定 transition-duration属性,否则持续时间为0,transition不会有任何效果。

    1)、可过渡的样式

    不是所有的CSS样式值都可以过渡,只有具有中间值的属性才具备过渡效果 ,具体如下

    颜色: color background-color border-color outline-color
    位置: backround-position left right top bottom
    长度: 
        [1]max-height min-height max-width min-width height width
        [2]border-width margin padding outline-width outline-offset
        [3]font-size line-height text-indent vertical-align  
        [4]border-spacing letter-spacing word-spacing
    数字: opacity visibility z-index font-weight zoom
    组合: text-shadow transform box-shadow clip
    其他: gradient
            .test {
                border: 1px solid red;
                width: 100px;
                height: 50px;
                background-color: lightblue;
                transition: width 2s, background-color 2s ease 0.5s;
                /*代表width持续时间为2s,延迟时间为默认值0;
                  background-color持续时间2s 延迟0.5s */
            }
    
            .test:hover {
                width: 300px;
                background-color: indianred;
            }

    效果图:

    2.gif

    2、transition-duration

    transition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值:0s。

    [注意]该属性不能为负值 。

    [注意]若该属性为0s则为默认值,若为0则为无效值。所以必须带单位 。

    [注意]该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间 。

    3、transition-timing-function

    transition-timing-function属性指定切换效果的速度。它可以取一下几个值。默认值:ease 。

    描述
    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 之间的数值。

    4、transition-delay

    transition-delay属性指定何时将开始切换效果,值是指以秒为单位(S)或毫秒(ms)。默认值:0s。

    [注意]该属性若为负值,无延迟效果,但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0,则无过渡效果;若该设定值大于0,则过渡元素从该设定值开始完成剩余的过渡效果 [注意]若该属性为0s则为默认值,若为0则为无效值。所以必须带单位 。

    [注意]该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间 。

    过渡阶段

            .test {
                border: 1px solid red;
                width: 100px;
                height: 50px;
                transition: 3s;/* 设置反向状态 */
            }
            .test:hover {
                width: 300px;
                transition: 100ms;
            }

    效果:

    3.gif

    触发方式

    一般地,过渡transition的触发有三种方式,分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等 。

    /* 把浏览器的宽度拖动到小于1000px时触发 */
    @media (max-width: 1000px){
        .test{
            width: 500px;
        }
    }

    (学习视频分享:css视频教程

    以上就是css3过渡采用什么属性的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css3 过渡属性
    上一篇:html5中li标签的用法是什么 下一篇:css3实现动画的好处有哪些

    相关文章推荐

    • h5和css3有什么优点• css3新增了哪些单位• CSS3设置动画的相关属性有哪些• css3中常用的背景属性有哪几个• css3动画怎么设置执行一次• css3伪类和伪元素是什么意思

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网