个人笔记

过渡transition

# 1.过渡效果

transition的中文含义是过渡。可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

transition 包括以下属性：

transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。

上面的四个属性也可以写成综合属性：

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;

transition: all 3s linear 0s;

注意点：

transition-property 属性对于不同的值有着不同的表现。

只让高度发生变化鼠标放上去的时候颜色瞬间发生变化。

<!--暂时没有发现好用的制作动图的软件-->
<style>
    .box {
        width: 200px;
        height: 200px;
        background: green;
        margin: 100px auto;
        
        /**只让高度发生变化**/
        transition: height 2s linear 0s;
    }
    .box:hover {
        height: 500px;
        background: red;
    }
</style>
<body>
<div class="box"></div>
</body>

所有属性都过渡

<style>
    .box {
        width: 200px;
        height: 200px;
        background: green;
        margin: 100px auto;
        
        /**让高度和背景色在变化时过渡**/
        transition: all 2s linear 0s;
    }
    .box:hover {
        height: 500px;
        background: red;
    }
</style>
<body>
<div class="box"></div>
</body>

← 转换动画 →