动画样式

1. 动画的基本实现条件

（1）短时间内连续播放多张静态的帧
（2）每一帧内部物体的状态必须发生变化

2. 触发式动画

（1）参数

过渡动画时间：transition-duration
过渡动画延迟：transition-delay
过渡动画时间函数： transition-timing-function
过渡动画属性： transition- property
过渡动画综合属性：属性名称 过渡时间 过度动画时间函数 动画延迟时间;

        div {
            width: 200px;
            height: 200px;
            transition: 1s;
            background-color: pink;
        }
        
        div:hover {
            width: 500px;
        }

3. 主动式动画

主动式:
创建动画帧:(百分数指的是帧数)

@keyframes 动画名称{
    0%{
        样式1
    }
    1%{
        样式2
    }
    ...
    100%{
        样式
    }
}

animation-name: 动画名称
animation-duration: 动画时间
和触发式一样的方法
animation-iteration-count: 动画执行次数
infinite 无限次数
2 :2次
animation-direction: 定义动画是否反向播放
reverse 反向(反方向)
alternate 反向(来回方向相反)
animation-fill-mode 停在动画帧某个位置
forwords 停在100%处

        div {
            width: 200px;
            height: 200px;
            animation: animate 1s infinite alternate;
            background-color: pink;
        }
        
        @keyframes animate {
            0% {
                width: 200px;
            }
            100% {
                width: 500px;
            }
        }