CSS3过渡:transition: 要过度的属性 花费时间 运动曲线 何时开始;
  1. 属性:变化的css属性,宽度高度、背景颜色、内外边距。如果想要所有的属性都变化过渡,写一个all就可以
  2. 花费时间:单位是秒(必须写单位),例如0.5s
  3. 运动曲线:默认是ease(可省略),linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)
  4. 何时开始:单位是秒(必须写单位),可以设置延迟触发,默认是0s
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: seagreen;
        /* transition:变化的属性 花费时间 运动曲线 何时开始 */
        transition: width 0.5s ease 0.1s, height 0.5s ease 0.1s;
        /* 多个属性写all */
        transition: all 0.5s;
    }

    div:hover {
        width: 400px;
        height: 400px;
        background-color: slateblue;
    }
</style>

<div>
    我要变化
</div>

发表评论