CSS3--动画

特点

• 过渡和动画之间的相同点
  • 过渡和动画都是用来给元素添加动画的
  • 过渡和动画都是系统新增的一些属性
  • 过渡和动画都需要满足三要素才会有动画效果
• 过渡和动画之间的不同点
  • 过渡必须人为的触发才会执行动画
  • 动画不需要人为的触发就可以执行动画

---

动画属性

• animation-name:;动画名字
• animation-duration:;动画持续时长
• @keyframes{}创建动画

    /*1.告诉系统需要执行哪个动画*/
            animation-name: lnj;
            /*3.告诉系统动画持续的时长*/
            animation-duration: 3s;
        }
        /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
        @keyframes lnj {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }

---

其他属性

animation-delay

• 作用：规定延迟动画
• 语法：animation-delay:1s;
• 取值：
  • s
  • ms

---

animation-timing-function

• 作用：规定动画的速度曲线
• 语法：animation-timing-function:ease;
• 取值：

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

---

animation-iteration-count

• 作用：
  • 播放动画次数
• 语法：animation-iteration-count :1;
• 取值：
  • 数值
  • infinite

---

animation-direction

• 作用：是否执行往返动画
• 语法：animation-diraction:normal;
• 取值：
  • normal
  • alternate

---

animation-play-state

• 作用：规定当前动画是否需要暂停
• 语法：animation-diraction:paused;
• 取值：
  • paused 暂停
  • running 播放

---

animation-fill-mode

• 作用：指定动画等待状态和结束状态的样式
• 语法：animation-fill-mode:none;
• 取值：
  • none 不改变默认行为。
  • forwards 让元素结束状态保持动画最后一帧的样式
  • backwards 在 animation-delay 所指定的一段时间内，让元素等待状态的时候显示动画第一帧的样式
  • both 向前和向后填充模式都被应用。

---

动画属性连写

• 作用：简写动画
• 语法：animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;