css3 动画

1. 触发式动画

只需要规定起始帧和结束帧

（1）参数

过渡动画时间：transition-duration

过渡动画延迟：transition-delay

动画帧速率： transition-timing-function
linear ： 匀速
ease： 慢，快，慢
ease-in ： 慢 ，快
ease-out： 快，慢
cubic-bezier(a,b,c,d); 贝塞尔曲线

过渡动画属性： transition- property
限定哪些属性样式变化
all：默认所有

复合样式：属性名 过渡时间 过度动画时间函数 动画延迟时间;

display：none --> display: block 没有动画效果
opacity: 1 --> opacity: 0 有动画效果 轮播淡入淡出效果

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

2. 主动式动画

创建动画帧：

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

语法：
顺序无要求
animation: name duration timing-function delay iteration-count direction;

参数：

• animation-name：需要绑定的动画名称

• animation-duration：完成动画的时间

• animation-timing-function：动画的速度曲线
  linear ： 匀速
  ease： 慢，快，慢
  ease-in ： 慢 ，快
  ease-out： 快，慢
  cubic-bezier(a,b,c,d); 贝塞尔曲线

• animation-delay：动画延迟时间

• animation-iteration-count：动画播放次数

• infinite 无限次

animation-direction: 定义动画是否反向播放
reverse 反向(反方向)
alternate 反向(来回方向相反)

animation-play-state: paused； 暂停
body：hover{
animation-play-state: paused；
}

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