过渡

  • 格式：transition: property duration timing-function delay;（过渡简写属性）

1.transition-property属性

  • 规定过渡属性，默认为all全部，可以指定过渡单个或多个属性
  • 格式：transition-property: width,background-color;

2.transition-duration属性

  • 规定过渡所需要的时间
  • 格式：transition-duration: 3s;

3.transition-timing-function属性

  • 规定过渡效果改变或持续的时间

  • 格式：transition-timing-function: linear;

    属性值：

  • 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 之间的数值。
    示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /*规定过渡属性，默认为all全部，可以指定过渡单个或多个属性*/
            transition-property: width,background-color;

            /*规定过渡所需要的时间*/
            transition-duration: 3s;

            /*规定过渡效果改变或持续的时间*/
            transition-timing-function: linear;

            /*规定过渡效果开始的时间*/
            transition-delay: 3s;
        }
        div:hover{
            width: 800px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>