css3 动画

动画

目录

动画

与过渡的区别

动画分为两步

1.定义动画

2.调用动画

所有属性

animation-timing-function的属性值

---

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

与过渡的区别

动画可以实现更多的变化，更多的控制，连续自动播放等效果。比过渡更加强大

动画分为两步

1. 制作动画
2. 调用动画

1.定义动画

使用 @keyframes 来定义,使用动画序列，

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

例

 @keyframes 动画名词 {
            0% {
                width: 100px;
            }
            50% {
                width: 300px;
            }
            100% {
                width: 200px;
            }
        }

2.调用动画

在相应元素的样式表下添加

/* 调用动画 */
            animation-name: 调用动画名称;
            /* 持续时间 */
            animation-duration: 持续时间（s）;

所有属性

          

属性	描述
@keyframes	规定动画
animation	简写属性
animation-name	调用时规定@keyframes动画的名称（必须）
animation-duration	规定动画完成一个周期的时间秒或毫秒，默认为0（必须写）
animation-timing-function	规定动画的速度曲线
animation-delay	规定动画从何时开始，默认为0
animation-iteration-count	规定动画的播放次数，默认为1，也可以是infinite（无限循环）
animation-direction	规定动画是否在下一周期逆向播放，默认为“normal”，“alternate（逆播放，让动画走回来，而不是直接跳回来）”
animation-play-state	规定动画是否正在运行或暂停，默认为“running”，还有paused（暂停），常常与鼠标经过等其他配合使用。
animation-fill-mode	规定动画结束后状态，保持forwards（停在结束位置），回到起点backwards（默认）

利用animation简写

 animation: name duration timing-function delay iteration-count direction fill-mode;

以1.动画名称（必须） 2.持续时间（必须） 3.运动曲线 4.播放次序 5.播放次数 6.是否反方向 7.动画起始或结束的状态    的顺序来写

            /* 调用动画 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-fill-mode: forwards;

相当于

            animation: move 2s linear 2s infinite alternate forwards;

简写多个动画之间用逗号隔开

animation-timing-function的属性值

值	描述
linear	匀速
ease	默认的，慢快慢
ease-in	低速开始
ease-out	低速结束
ease-in-out	低速开始和结束
step（步长）	指定了时间函数中的间隔数量（步长），跳着走