10. 过渡效果

过渡 transition

transition 用于实现元素不同状态间的平滑过渡，经常用来制作动画效果

在 CSS3 的世界里，让网页元素动起来的第一个方法是利用 transition，基于 transition 可以让元素的某个 CSS 属性从指定的开始状态过渡到特定的结束状态。我们将元素「从指定的开始状态过渡到特定的结束状态」这个过程简称为「状态变换」，事实上 transition 便像是页面元素「状态变换」的润滑剂，如果没有 transition，元素「状态变换」的过程将会显得生硬而突兀（如下图中左边的小圆球，查看 DEMO）。

transition 可作用于普通的 CSS 属性（如 background 、opacity …），也可以作用于 CSS3 出现时新引入的 transform 属性，而利用后者可以实现 3D 的过渡效果。

transform 属性就像是 CSS3 这个动效武器子弹里的火药。

 .box{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            /* transition-property: width; */
            transition-property: all;
            transition-duration: 4s;
            transition-delay: 0.5s;
            transition-timing-function: linear;

            /* 过渡属性  持续时间  延迟时间  运动曲线 */
            transition: all 0.8s 4s linear;

             /* 过渡属性  持续时间  运动曲线 */
            transition: all 0.8s linear;

             /* 过渡属性  持续时间 默认运动曲线ease */
            transition:all 0.8s;

            /* 持续时间 */
            transition: 0.8s;
            /* 运动曲线: ease ease-in ease-in-out ease-out linear 贝塞尔曲线 cubic-bezier(.2,.38,.34,1.16)*/

            /* 如果只有一个时间,必须是持续时间,持续时间不能省略 */
            transition:all .8s cubic-bezier(.2,.38,.34,1.16);
        }
        .box:hover{
            width: 600px;  
            height: 400px;        
        }

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

Transition 动画的局限性和适用性

transition 实现的动画有下面这些特点：

1. 支持有限的 CSS 属性
   可通过《CSS animated properties》一文查看支持过渡动效的 CSS 属性。

2. 隐式过渡（implicit transitions）
   transition 的过渡动画是隐式的，即除了动画的开始状态和结束状态我们可以自定义之外，「状态变换」的具体过程由浏览器自动执行，中途无法进行人为干预。

3. 一次性、不可暂停或反转
   transition 只支持两个状态之间的变换过渡，不支持多个状态的连续变换过渡，并且状态的变换是一次性的（无法循环）， 不可暂停，且不可反转（从状态 A 过渡到 B 后不能立即又过渡回 A）。

所以，在实际应用中我们常常利用 transition 来做那些轻量的、修饰性的动效，用于增强用户在网页上操作时得到的反馈。例如：

• 元素「hover」 或「点击」后的反馈
• 弹窗「打开」或「关闭」时的效果
• …

示例

过渡效果案例