CSS3动画

可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化、控制、连续自动播放等效果。

基本使用

动画制作

先定义动画再调用动画

动画定义

keyframes(类似定义类选择器)

@keyframes 动画名称{
  0%{
  width：100px；
  }
  100%{
  width：200px；
  }
}

动画序列

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果，可改变任意多的样式和次数
• 请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%
• 百分比要是整数，因为百分比就是对该案例总时间的划分

动画使用

div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px auto;
            /* 调用动画 */
            animation-name: 动画名称;
            /* 调用时间 */
            animation-duration: 持续时间;
        }

/* 我们想一打开页面，一个盒子绕圈走 */
        @keyframes move {
            0% {
                transform: translate(0px);
            }

            25% {
                transform: translateX(1000px);
            }

            50% {
                transform: translate(1000px, 500px);
            }

            75% {
                transform: translateY(500px);
            }

            100% {
                transform: translate(0px);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: move;
            animation-duration: 2s;
        }

动画属性

keyframes规定动画
animation所有动画属性的简写属性（animation-play-state除外）
animation-name规定@keyframes动画的名称（必须）
animation-duration规定动画完成一个周期所花费的s或ms，默认是0（必须）
animation-timing-function规定动画的速度曲线，默认是“ease”
animation-delay规定动画何时开始，默认是0
animation-iteration（重复的）-count规定动画被播放的次数，默认是1，还有infinite（无限循环）
animation-direction规定动画是否在下一周期逆向播放，默认是“normal”，如果想反方向回来用“alternate逆播放”
animation-play-state规定动画是否正在运行或暂停，默认是“running”“paused”
animation-fill-mode规定动画结束后状态，保持结束状态forwards，回到起始状态backwards

简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始或结束状态

速度曲线细节

linear：动画从头到尾的速度是相同的，匀速 ease：默认。动画以低速开始，然后加快，在结束前变慢 ease-in：动画以低速开始 ease-out：动画以低速结束 ease-in-out：动画以低速开始和结束 steps（）：指定了时间函数中的间隔数量（步长）