关键帧动画

一. 实现动画的两个部分

1. 在 @keyframes 中定义规则

2. 应用动画元素：指定动画开始，结束以及中间点样式的 关键帧

1. @keyframes 中定义规则

​
/* 首先使用动画 要定义动画规则 */
    @keyframes move {
            /* 简单规则 */
            from {
                 transform:translate(0);
            }
            to {
                 transform:translate(200px);
              }
        }

​

from 和 to 就是动画的两个关键帧，表示开始的时候的关键帧样式以及结束时候的关键帧样式。也可以使用百分号的形式来描写关键帧，其中 from 与 0% 的效果一致，to 与 100%效果一致

2. 应用动画元素

指定动画开始，结束以及中间点样式的关键帧

 /*应用动画的元素*/
 .cont:hover{
 /*animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;*/
     animation: move 2s linear 0.5s 3 forwards  alternate;
        }

---

二，动画属性

1. animation-iteration-count，设置动画的重复次数

默认为 1次,也可以是 infinite 表示无限次数

2. animation-direction，设置动画的方向

            normal  默认值,正方向运行，向前播放

            reverse  反方向运行，向后播放

            alternate  当运行次数为奇数时,正方向运行;偶数时,反方向运行

            alternate-reverse  当运行次数为奇数时,反方向运行;偶数时,正方向运行

 3.   animation-fill-mode，设置动画最后一帧的状态

          forwards 以动画的最后一帧作为动画的最后呈现状态

          both: 状态和 forwards相同

          backwards 默认值,以动画开始 时候的第一帧作为动画的最后呈现状态

4. animation-play-state，设置动画的播放状态

             paused 暂停

             running 运动

---

三，实现动画的三个必须

1. 动画名称，animation-name

2. 动画的持续时间，默认为0，animation-duration

3. @keyframs 规则

A. 动画简写

/* animation: 名称,持续时间,匀速,重复无限次 */
   animation: move 2s lnear infinite;

---

四，关键帧动画和过渡动画的区别

1.关键帧动画的触发时机是,只要添加关键帧动画,就会立即执行动画

2.关键帧动画可以对动画的流程进行控制