动画

定义动画

定义动画

/* 定义动画 第一种 */
@keyframes move {
            from {}
            to {}
        }
        
/* 定义动画 第二种 */        
        @keyframes move2 {
            100% {}
            80% {}
            60% {}
            40% {}
            20% {}
        }

使用动画

`animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时态;`

定义动画：animation: 定义的动画名称动画持续的时间;
```
animation: move 1s;
```
动画延迟时间播放: animation-delay: 秒数;
```
animation-delay: 1s;  
```

动画停留状态：animation-fill-mode: backwards;

停留最后一帧的状态
  animation-fill-mode: forwards;

停留第一帧的状态 感觉是默认状态
  animation-fill-mode: backwards;

'both'同时设置了'forwards'和'backwards'
  animation-fill-mode: both;

指定动画播放次数 （animation-iteration-count）

无数次

animation-iteration-count: infinite;

指定次数

animation-iteration-count: 8;  /* 8次 */

动画方向（animation-direction）

/* 先正再反 */
animation-direction: alternate;
/* 先反再反 */
animation-direction: reverse;
/* 先反再正 */
animation-direction: alternate-reverse;

速度曲线

animation-timing-function: value;

animation-timing-function：使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一。

跳跃的速度曲线
```
transition-timing-function: steps(4);
```

值	描述
liner	匀速。动画从头到尾的速度相同
ease	默认。先慢后快.以低速进行，然后加快，结束前又变慢
ease-in	低速开始
ease-out	低速结束
ease-in-out	以低速开始和结束
steps(int,start\|end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数(大于0)。第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。start：表示直接开始。end：默认值，表示戛然而止。

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    /* 图片宽度 = 1680/12 */
    /* 设置背景图片的位移 （把整个图片都位移过去） 图片位移 1680 steps(12) */
    div {
        width: 140px;
        height: 140px;
        border: 1px solid red;
        background: url(./images/bg.png) no-repeat;
        /* 使用动画 */
        animation: ani 1s steps(12) infinite, ani2 4s linear forwards;
    }
    
    @keyframes ani {
        100% {
            background-position-x: -1680px;
        }
    }
    
    @keyframes ani2 {
        100% {
            transform: translateX(1000px);
        }
    }
    /* 设置背景图片的位移 （把整个图片都位移过去） 图片位移 1680 steps(12) */

同一个元素可以设置多个动画，用逗号隔开
图片宽度 = 1680/12
设置背景图片的位移（把整个图片都位移过去）图片位移 1680 steps(12) 12步走完

暂停动画**（animation-play-state）
```
animation-play-state: paused;
```

注意

动画必须要有两个属性：动画的名称和动画播放时间
其他属性看需求不区分顺序但播放时间（秒数）一定要写在延迟时间（秒数）前面
无缝滚动技巧
- 两个大盒子
  
  外层盒子设置宽度和高度
  
  里层盒子存放多张图片，存放多少张图片设置宽度为多少
- 真实存放的图片数量比实际上要多
  
  多多少就得看外层盒子能装几张（浮动）
- 设置动画
  
  设置内层盒子的位移等于真实的那几张图片的位移
  
  设置动画无限滚动

CSS3 动画

动画

定义动画

使用动画

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时态;

注意

`animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时态;`