Web开发学习笔记(37)——CSS3(11)过渡-前端教程-前军教程网

（1）想让元素样式有个变化的过程，那么我们需要以某种方式从一个样式过渡到另一种样式。

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

CSS3 过渡是元素从一种样式逐渐过渡到另一种样式。

其语法如下所示：

transition: 指定属性 持续时间 速度曲线 开始时间;

它是一个复合属性，我们也可以如下分开使用这几个属性。

transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin-top:40px;
            margin-left:40px;
            width:50px;
            height:50px;
            background-color:#51adcf;
            transition: transform 1s ease-in-out; /*ease-in-out 慢速开始慢速结束*/
        }
        div:nth-child(2){
            transform: rotate(-60deg);
        }
        div:hover{
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

在 div:hover 中，使用 transform: scale(2) 设置当鼠标放在 div 元素上时，元素会放大 1 倍。
在 div:nth-child(2) 中，使用 div:nth-child(2) 设置第二个元素逆时针旋转 60deg。
使用 transtion 属性实现过渡的效果，其中 ease-in-out 是 transition-timing-function 属性的属性值。

transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表：

属性值	说明
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,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)）。
steps(int,start 或者 end)	steps() 有两个参数，第一个为步长，其值必须为整数，第二个值为可选值，它有两个取值，分别是 start 和 end。
step-start	相当于 steps(1, start)。
step-end	相当于 steps(1, end)。
cubic-bezier(n,n,n,n)	规定在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
initial	规定使用默认值。
inherit	规定从父元素继承该属性值。

例子，图片一秒一步，4步变大为原先二倍：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:50px;
            height:50px;
            margin:50px;
            background-color:cornflowerblue;
            transition: transform 4s steps(4);
        }
        div:hover{
            transform:scale(2);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

练习一下：

在 body 中添加一个宽和高均为 100 个像素的 div 元素，其背景颜色为黄色。

设置过渡样式，当鼠标放在元素上，延迟 1 秒后，元素的宽度会慢慢变成 300 个像素。

过渡整个过程会持续 5 秒。

按以上要求用 HTML 完成以下效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height: 100px;
            background-color:rgb(252, 252, 69) ;
            transform-origin:left center; /*固定左端不动，指定变化起始位置*/
        }
        div:hover{
            transform:scaleX(3);
            transition: transform 5s 1s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Web开发学习笔记(37)——CSS3(11)过渡