深入理解transition

最新推荐文章于 2024-08-24 13:17:48 发布

Ys@_yxl

最新推荐文章于 2024-08-24 13:17:48 发布

阅读量272

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_45817492/article/details/111872874

版权

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

1.语法

transition ：    transition-property transition-duration transition-timing-function transition-delay

它的具体描述如下：

值	描述
transition-property	过渡效果，默认值all
transition-duration	过渡延续时间，transition效果需要指定多少秒或毫秒才能完成，默认值0s
transition-timing-function	过渡函数，指定transition效果的转速曲线，默认值0s
transition-delay	过渡延迟时间，定义transition效果开始的时候，默认值ease

注意
1.（浏览器支持问题）：
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 属性。
Safari 支持替代的 -webkit-transition-property 属性。
Internet Explorer 9 以及更早版本的浏览器不支持 transition-property 属性。
2.（写法问题）：
书写时，属性之间是空格，不是逗号。当需要添加多个样式的变换效果，添加的属性才由逗号分隔。
3.(可过渡元素)
如 width，height，top，right，bottom，left，opacity 等等。

2.1transition-property

其主要有以下几个值：
none(没有属性获得过渡效果)；
all（所有属性都有过渡效果）这个也是其默认值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box ,.box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 10px;
        }
        .box:hover{
            width: 200px;
            transition: all 2s;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

2.2transition-duration

用于transition效果需要指定多少秒或毫秒才能完成。
该属性单位为s或者ms，值是时间。
注意:值不能为负值，且必须带单位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box ,.box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 10px;
        }
        .box:hover{
            width: 200px;
            transition: all 2s;
        }
        .box1:hover{
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <div class="box1">
    </div>
</body>
</html>

2.3transition-timing-function

用于指定transition效果的转速曲线，就是设置变化效果的快慢。

值	描述
ease	逐渐变慢
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	加速后减速

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box ,.box1,.box2,.box3{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            margin-top: 10px;
        }
        .box:hover{
            width: 200px;
            transition: all 2s linear;
        }
        .box1:hover{
            width: 200px;
            transition: all 2s ease-in;
        }
        .box2:hover{
            width: 200px;
            transition: all 2s ease-in-out;
        }

        .box3:hover{
            width: 200px;
            transition: all 2s ease-out;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

2.4transition-delay

过渡延迟时间，定义transition效果从什么时候。
该属性单位为s或者ms，值是时间。
注意:值不能为负值，且必须带单位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box ,.box1,.box2,.box3{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            margin-top: 10px;
        }
        .box:hover{
            width: 200px;
            transition: all 2s 0s linear;
        }
        .box1:hover{
            width: 200px;
            transition: all 2s 1s ease-in;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>