问题描述：

相关场景不知道怎么说，感觉各个方面好像动画都要比国度更好用一些？

相关代码：

2-22 过渡VS动画
    过渡：
        transition：
            只需要定义初始状态和结束状态，会自动生成中间的变化状态

            需要借助hover等伪类来呈现效果

            语法：
                transition：要进行过渡效果的属性 过渡的总时间 过渡的缓动效果 延时度

                进行过渡的属性必须是数值类型的属性，或者2D、3D的变形

            这四个小属性可以拆分开来写，进行CSS的层叠效果

            缓动效果的取值有：ease ease-in ease-out ease-in-out linear 贝塞尔曲线;

            过渡效果可以应用于：
                1.照片上文字的压盖效果
                2.伪元素的旋转效果
                3.元素的翻盖，结合transform-origin属性来定义翻盖的方向
                4，空间元素体的旋转效果

    动画：
        动画是不需要触碰就可以自动执行的，比过渡更灵活自然

        定义的语法：

            @keyframes 动画名称 {
                from {
                    初始效果
                }
                to {
                    结束效果
                }
            }

            定义完的动画被元素进行调用才可以生效
                animations:动画名称  动画总时长 动画播放的速度 动画的延迟时间  (第五个参数)；

                第五个参数：动画的执行次数
                    可以直接写数字，infinite(动画永不停止),alternate(动画结束后再匀速返回),forwards(动画结束在结束状态不会恢复初始状态)

            动画速度和过渡的缓动参数是一样的

            多帧动画的定义：用百分数来表达不同的状态

        应用的状态：
            灯泡的闪烁效果
            场景穿梭

    相同点：
        CSS3新特性，里面的属性值可以拆分成小元素进行使用

        都有初始状态和结束状态的设置

    不同点：
        transition
            一般只应用与数值类型的属性，以及2D\3D变形的效果；
            无法设置过渡的次数，是一次性的，就开始到结束
            要靠CSS伪元素的设置来实现该效果

        animations
            值基本可以应用于所有属性的属性值；
            可以设置过渡的次数甚至是一直循环
            无需外物可以在加载网页的时候就进行动画效果的实现
            还可以进行多帧的设置，设置多个状态时的不同属性值

    实际应用场景？