CSS3 Transition详解和使用

2019-11-08 09:34:46

参考地址 CSS3 Transition

Transition 简介

Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性。


transition-property 用于指定应用过渡属性的名称

transition-duration 用于指定这个过渡的持续时间

transition-delay 用于指定延迟过渡的时间

transition-timing-function 用于指定过渡的类型

transition-property

transition-property 用于指定应用过渡的属性名称,可以指定多个属性名称,多个属性名称之间用, 分隔。

默认值为 all 也就是所有的元素都应用过渡效果。

例如,想让容器的宽高有一个过渡的效果,就可以这样写:


<style>

    .box {

        width: 200px;

        height: 200px;

        background-color: dodgerblue;

        transition-property: width, height;   /*设置宽高过渡的属性*/

    }


    .box:hover {  /*在鼠标移入的时候修改宽高*/

        width: 400px;

        height: 400px;

    }

</style>


<body>

    <div class="box"></div>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

注意:当只设置了 transition-property 属性而没有设置过渡持续时间的时候,过渡效果不会生效。


transition-duration

transition-duration 用于设置过渡的持续时间,属性值以秒s或毫秒ms为单位,默认值为0。

同样可以指定多个时长,多个每个时长会被应用到由 transition-property 指定的对应属性上。

例如:想让容器的宽度有一个5秒的过渡效果,高度有一个3秒的过渡效果,就可以这样写:


<style>

    .box {

        width: 200px;

        height: 200px;

        background-color: dodgerblue;

        transition-property: width, height;

        transition-duration: 5s, 3s;  /*设置与 transition-property 对应的过渡时间*/

    }


    .box:hover { /*在鼠标移入的时候修改宽高*/

        width: 400px;

        height: 400px;

    }

</style>

</head>


<body>

    <div class="box"></div>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

运行效果图:


如果指定的时长个数小于属性个数,那么时长列表会重复。

以下代码的意思是:宽度、高度、背景颜色的过渡时间都是5秒。


<style>

    .box {

        width: 200px;

        height: 200px;

        background-color: dodgerblue;

        transition-property: width, height, background-color;  /* 属性列表长一些 */

        transition-duration: 5s;  /* 如果时长的个数小于属性列表,则时长列表会重复 */

    }


    .box:hover {

        width: 400px;

        height: 400px;

        background-color: deeppink;

    }

</style>


<body>

    <div class="box"></div>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

运行结果如下:


如果时长列表更长,那么该列表会被裁减。

两种情况下,属性列表都保持不变。

以下代码的意思是:宽度的过渡时间是5秒,高度3秒,背景颜色2秒


<style>

    .box {

        width: 200px;

        height: 200px;

        background-color: dodgerblue;

        transition-property: width, height, background-color;  /* 设置三个属性的过渡效果 */

        transition-duration: 5s, 3s, 2s, 1s, 0s;  /* 有五个时长,会从第四个开始截断。 */

    }


    .box:hover {

        width: 400px;

        height: 400px;

        background-color: deeppink;

    }

</style>


<body>

    <div class="box"></div>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

运行结果如下



transition-delay

transition-delay 规定了在过渡效果开始作用之前需要等待的时间(延迟时间),值以秒(s)或毫秒(ms)为单位,表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果;取值为负时会导致过渡立即开始。

可以指定多个延迟时间,每个延迟将会分别作用于你所指定的相符合的css属性transition-property。


<style>

    .box {

        width: 200px;

        height: 200px;

        background-color: dodgerblue;

        transition-property: width;  /* 设置宽度有过渡效果 */

        transition-duration: 3s;  /* 设置过渡时间为 3s */

        transition-delay: 1s;   /* 设置延迟时间为 1s */ 

    }


    .box:hover {

        width: 300px;  

    }

</style>


<body>

    <div class="box"></div>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

运行结果如下:



transition-timing-function

transition-timing-function用于指定过渡类型,可选值有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier


ease 默认值,先加速后减速

<style>

    .box {

        width: 200px;

        height: 200px;

        background-color: dodgerblue;

        transition-property: width;

        transition-duration: 3s;

        transition-timing-function: ease;  /* 设置过渡类型,默认为 ease(先加速后减速) */

    }


    .box:hover {

        width: 400px;

    }

</style>


<body>

    <div class="box"></div>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

运行结果如下:



linear 匀速

transition-timing-function: linear;

1

运行结果如下:



ease-in 加速

transition-timing-function: ease-in;

1

运行结果如下:



ease-out 减速

transition-timing-function: ease-out;

1

运行结果如下:



ease-in-out 先加速后减速,效果比 ease 感觉强烈一些

transition-timing-function: ease-in-out;

1

运行结果如下:



cubic-bezier 贝塞尔曲线

transition-timing-function: cubic-bezier(.09, .88, .2, .17);

1

运行结果如下:



简写属性 transition:

transition是一个简写属性,用于设置 transition-property,transition-duration,transition-timing-function, 和transition-delay。

CSS 过渡 由简写属性 transition 定义是最好的方式,可以避免属性值列表长度不一,节省调试时间 。


<style>

    .box {

        width: 200px;

        height: 200px;

        background-color: dodgerblue;

        /* transition 简写属性 */

        transition: 1s width, 2s height;

    }


    .box:hover {

        width: 400px;

        height: 400px;

    }

</style>


<body>

    <div class="box"></div>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

运行结果如下:


注意:

在transition属性中,各个值的书写顺序是很重要的:第一个可以解析为时间的值会被赋值给transition-duration,第二个可以解析为时间的值会被赋值给transition-delay


推荐抒写顺序

过渡时间 过渡样式 过渡形式 延迟时间 [,过渡时间 过渡样式 过渡形式 延迟时间]


兼容性

transition可以不用厂商前缀,不过鉴于标准刚刚稳定,对于基于 Webkit的浏览器仍然需要厂商前缀。如果想兼容旧版本的浏览器那么也需要厂商前缀(例如Firefox 15 及之前版本, Opera 12 及之前版本)


过渡的坑

transition 在元素首次渲染还没有完成的情况下,是不会触发过渡的。

过渡如果写在js 中,则必须 写在 onload 函数中,否则在页面中的元素还没有渲染完的情况下不会触发过渡!

<style>

    * {

        margin: 0;

        padding: 0;

    }


    .box {

        width: 200px;

        height: 200px;

        background-color: deepskyblue;

        margin: 100px auto;

        transition: 1s;

    }

</style>

<script>

/* 在元素还没有完全加载的时候是不会触发过渡的 */

    var box = document.querySelector(".box");

    box.style.width = "300px";

</script>

</head>


<body>

    <div class="box"></div>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

解决方法


<script>

    window.onload = function () {

        var box = document.querySelector(".box");

        box.style.width = "300px";

    };

</script>

1

2

3

4

5

6

transition 在绝大部分变换样式切换时,变换组合的个数或位置不一样时,是没有办法触发过渡的

过渡只关心元素的初始状态和结束状态,没有方法可以获取到元素在过渡中每一帧的状态



  • 2020-12-01 17:25:39

    axios并发操作

    很多时候,我们需要同时向后端进行多个请求,当所有请求都返回数据后,再进行一些操作。

  • 2020-12-02 14:45:35

    Remote-SSH使用教程 VSCode

    微软开发了一个VSCode的插件Remote-SSH,可以说是目前比较完美的解决了在windows下开发linux程序的问题。

  • 2020-12-02 22:56:09

    android设置禁止横屏失效崩溃

    误区,其实这两个代码都不是禁止横屏的,可以说根本没有禁止横屏的代码,这两个代码是设置竖屏的。 并且安卓先检测xml代码,如果是竖屏就直接展示竖屏的,但是如果java代码中设置的横屏,他会先展示竖屏咱展示横屏的 。

  • 2020-12-03 10:43:18

    xshell 连接 wsl

    装上 ubuntu on windows 后,默认要先打开 cmd, 再运行 bash 进入 ubuntu 的 shell。 但是这个shell很难看,配色不好就算了,还存在各种复制粘贴麻烦、默认没进入 home 目录、各种报警声等问题。所以尝试用 xshell 登陆 ubuntu

  • 2020-12-03 10:48:41

    在window10和Linux子系统 WSL如何互传文件

    想将 window下下载的文件上传到 linux 子系统中,如何用命令实现,其实可以将文件直接拖拽到 linux 在window下的目录即可(C:\Users\yunan.hu\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu20.04onWindows_79rhkp1fndgsc\LocalState\rootfs)但是在linux下用命令怎么实现呢?