过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果

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

xxxxxxxxxx
.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transition: width 2s ease 1s;
}
.box:hover{
    width: 500px;
}

实现小米官网动画效果

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

xxxxxxxxxx
.box {
    width: 200px;
    height: 250px;
    background-color: #8ac007;
    margin: 50px;
    transition: all .2s linear;
}
.box:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transform: translate3d(0,-2px,0);
}

实时效果反馈

1.过渡效果属性中，transition-duration属性的作用是：

A 设置过渡属性

B 过渡效果花费的时间

C 过渡效果的时间曲线

D 渡效果何时开始

答案

1=>B