CSS3-动画

共计 1123 个字符，预计需要花费 3 分钟才能阅读完成。

动画 animation

可以通过设置多个节点来精确一个或一组动画，常用来实现复杂的动画效果

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

制作动画分为两步：

1. 先定义动画

使用 @keyframes 定义动画（类似定义类选择器）

 @keyframes 动画名称 {
    /* 开始状态 */
    0% {
        width: 100px;
    }
    /* 结束状态 */
    100% {
        width: 300px;
    }
}

2. 在使用（调用）动画

元素使用动画

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

动画序列

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

动画属性

animation-timing-function:规定动画的速度曲线，默认是 ease

    animation-name: move; /* 动画名称 */
    animation-duration: 3s; /* 持续时间 */
    animation-timing-function: ease; /* 运动曲线 */
    animation-delay: 1s; /* 何时开始 */
    animation-iteration-count: infinite; /* 重复次数 infinite无限重复 */
    animation-direction: alternate; /* 是否反方向播放 默认normal 反方向就写alternate */
    animation-fill-mode: forwards; /* 动画结束后的状态默认是backwards回到起始状态 停留在结束状态就写forwards */

动画简写

    animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态;
    animation: move 3s linear .5s infinite alternate;

• 简写属性里面不包括暂停动画 animation-play-state;
• 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是直接跳回来：animation-direction: alternate;
• 盒子动画结束后，想要停在结束位置：animation-fill-mode: forwards;