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

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

<style>

.box {

width: 100px;

height: 50px;

background-color: pink;

transition: 2s;

}

.box:hover {

width: 200px;

background-color: teal;

}

</style>

$$

transitiontransition-property(过渡属性)、 transition-duration (过渡时长)、 transition-timing-function (变化曲线)、 transition-delay(延迟时长)。

transition-property

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

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/yLpJKpY?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

transition-duration

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/OJzXZrR?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

transition-timing-function

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/YzYWvqw?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

transition-delay

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/JjMKZEj?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>


练习

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

$$demo

<div>

<div class="face">

<div class="hair"></div>

<div class="eyes">

<div class="eye"></div>

<div class="eye"></div>

</div>

<div class="mouth"></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>

$$