css3过渡transition

最新推荐文章于 2018-08-24 09:59:47 发布

夏末终秋凉

最新推荐文章于 2018-08-24 09:59:47 发布

阅读量428

点赞数

分类专栏：技术天地 html css 文章标签： css css3 html web 前端

本文链接：https://blog.csdn.net/qq545698514/article/details/53585953

版权

css 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

技术天地

6 篇文章 0 订阅

订阅专栏

css3标志属性之一的transition，可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。比如，我们在点击某个盒子，让其宽度增长100%；代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover宽度增长</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: #f00;
        }
        div:hover{
            width: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

很简单的几句代码，就是鼠标悬浮在div上时，宽度瞬间增长到200px，请注意瞬间这个词，说明我们在悬浮在盒子上时，宽度会马上增加，基本上肉眼是无法观察到这个变化过程，只能看到最终的结果。因此就引出了css3中transition这个属性。该属性的用法如下：

transition-property 变化的属性
transition-duration 变化所需的时间
transition-timing-function 过渡曲线
transition-delay 过渡开始延迟时间

连写格式：transition：属性时间曲线延迟；

还是用之前的例子说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover宽度增长</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: #f00;
            transition:width 2s linear 0.5s;//宽度变化  过渡时间2s  匀速运动  延迟0.5s
        }
        div:hover{
            width: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

最后总结过渡三部曲：

1.有属性发生变化

2.确定是哪个属性的元素发生了变化

3.在该元素的css样式中添加transition过渡效果。

12.13补充：

transition属性的值可以只有两个，变化的属性和过渡的时间。如果有多个属性发生变化，则可以用连写方式：

transition:值1 时间，值2 时间。

如果两个值的时间相同，比如宽高变化时间都是1s，那么可以直接写为transition：all 1s；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover宽度增长</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: #f00;
            /*transition:width 2s,height 2s;*/
            transition:all 2s;
        }
        div:hover{
            width: 200px;
            height:300px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>