transitions 提供了元素的样式属性值在改变时产生过渡动画效果。

$$tip

只有一些属性值在改变时能应用动画效果，请参考 CSS animated properties - MDN 。

<div class="box"></div>
<style>
    .box {
        width: 100px;
        height: 50px;
        background-color: pink;
        transition: 2s;
    }
    .box:hover {
        width: 200px;
        background-color: teal;
    }
</style>

试着把鼠标悬停到以下的粉色矩形上。

$$demo

<style>

.box {

width: 100px;

height: 50px;

background-color: pink;

transition: 2s;

}

.box:hover {

width: 200px;

background-color: teal;

}

</style>

transition 由 transition-property（过渡属性）、 transition-duration （过渡时长）、 transition-timing-function （变化曲线）、 transition-delay（延迟时长）。

transition-property

transition-property 决定了哪个属性的值在改变时会产生动画效果，有以下取值：

all：默认值，所有值改变了的属性都会出现动画效果。
none：没有过渡动画。
指定属性名

以下范例中只设置了宽度，因此只有宽度的改变会产生动画效果，而颜色则是瞬变的。

transition-duration

transition-duration 指定了过渡动画的时长，默认值 0s ，取值是时间单位。

transition-timing-function

transition-timing-function 定义了动画的变化曲线，默认值 ease ，有以下取值：

关键字：参考变化曲线示例。
使用函数：参考 easing-function - MDN ，更好的选择是去 easings.net 复制一个定义好的函数。

transition-delay

transition-delay 决定了动画延迟触发的时间，默认值 0s ，取值是时间单位。

练习

完成以下实例，把鼠标移动到上面试试。

$$demo

<div>

</div>

</div>

<style>

.face {

border: 8px solid black;

border-radius: 16px;

background-color: orange;

width: 200px;

height: 200px;

}

.hair {

height: 40px;

background-color: black;

margin-bottom: 40px;

}

.eyes {

display: flex;

justify-content: space-around;

}

.eye {

width: 60px;

height: 10px;

margin-bottom: 60px;

background-color: black;

position: relative;

}

.eye::before {

content: "";

display: block;

width: 20px;

height: 20px;

background-color: black;

position: absolute;

left: 0;

bottom: -20px;

transition: 1s;

}

.face:hover .eye::before {

left: calc(100% - 20px);

}

.mouth {

width: 60px;

height: 10px;

margin: 0 auto;

background-color: white;

transition: 1s;

}

.face:hover .mouth {

width: 40px;

height: 40px;

border-radius: 50%;

background-color: red;

}

</style>

$$answer

<div class="face">
    <div class="hair"></div>
    <div class="eyes">
        <div class="eye"></div>
        <div class="eye"></div>
    </div>
    <div class="mouth"></div>
</div>
<style>
    .face {
        border: 8px solid black;

        border-radius: 16px;

        background-color: orange;

        width: 200px;
        height: 200px;
    }

    .hair {
        height: 40px;

        background-color: black;
        margin-bottom: 40px;
    }

    .eyes {
        display: flex;

        justify-content: space-around;
    }

    .eye {
        width: 60px;
        height: 10px;

        margin-bottom: 60px;

        background-color: black;
        position: relative;
    }

    .eye::before {
        content: "";

        display: block;

        width: 20px;
        height: 20px;

        background-color: black;

        position: absolute;

        left: 0;
        bottom: -20px;

        transition: 1s;
    }

    .face:hover .eye::before {
        left: calc(100% - 20px);
    }

    .mouth {
        width: 60px;
        height: 10px;

        margin: 0 auto;
        background-color: white;
        transition: 1s;
    }

    .face:hover .mouth {
        width: 40px;
        height: 40px;

        border-radius: 50%;
        background-color: red;
    }
</style>