animation动画

animation-动画

一、概念：动画是可以设置CSS属性从某一种状态过渡到另外一种状态。

二、使用：

1、定义关键帧：

**1）**使用@keyframes规则，定义动画的关键帧

2)语法1：

/* 使用@keyframes规则定义关键帧  name是自定义名称（animation-name） */
@keyframes name {
  /* 动画初始状态 */
  from {
    transform: translateX(0%);
  }
  /* 动画结束状态 */
  to {
    transform: translateX(100%);
  }
}

语法2：

关键帧 keyframes 可以控制动画序列的中间步骤。

每个 @keyframes 规则包含多个关键帧

/* 使用@keyframes规则定义关键帧  name是自定义名称（animation-name） */
@keyframes name {
  /* 动画初始状态 */
  0% {
    transform: translateX(0%);
  }
  /* 动画中间状态（可以有多个中间状态） */ 
  50% {
    transform: translateX(50%);
  }
  /* 动画结束状态 */
  100% {
    transform: translateX(100%);
  }
}

1）每个@keyframes可以定义多个关键帧，每个关键帧有一个百分比值作为名称

@keyframes pingyi{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(300px);
        color: #ffaaff;
    }
    50%{
        transform: translate(300px,300px);
        color: #00aaff;
    } 
    75%{
        transform: translate(0px,300px);
        color: #999;
    }
    100%{
        transform: translate(0px,0px);
        color: #ccc;
    }
}

2）关键帧中的属性重名，以最后一个为准：

25%{
    transform: translateX(300px);
    /* 粉色 */
    color: #ffaaff;
    /* 绿色（最终在页面显示文本为绿色）后声明color属性值会覆盖先声明的color属性值 */
    color: #00ff00;
}

3）同一个关键帧中的属性相同，后声明的属性生效：

@keyframes identifier {
  0% { top: 0; }
  /* 50% 关键帧中分别最后设置的属性 top: 10px 和 left: 20px 是有效的，但是
    其他的属性会被忽略 */
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
    
}

2、引入动画：使用animation属性引入动画

常用的animation属性：

**1）animation-name属性：**指定引入动画的名称（@keframes规则声明的名称）

值可以是一个或多个（多个值使用逗号分隔）；

值为none时，动画失效。

2）animation-duration属性：

**作用：**指定一个动画播放的时长。

**值：**默认值为 0s，表示无动画。单位为秒 (s) 或者毫秒 (ms)，无单位值无效。

3）animation-timing-function属性：

**作用：**定义动画播放过程中的速率（节奏）

值：

i. 值为关键词：

ease（缓和匀速）

ease-in（加速）

ease-out（减速）

ease-in-out（先加速后减速）

linear （线性匀速）

step-start （ 会在动画开始的时候直接突变为该帧的最终结果）

step-end（从每一帧的开始直接突变为结尾效果，中间过渡的效果看不到。）

ii 值为function（函数）：

**贝塞尔曲线函数：**cubic-bezier(0.1, 0.7, 1.0, 0.1);通过给定不同的x和y坐标的值来设置动画的播放速率（比如加速效果ease-in）。

以上函数中的四个参数都是0-1之间的数字。

steps()函数

**作用：**将动画或者过渡分割成段。

**语法：**steps(number, direction)

参数number代表了动画分隔的段数（例如4代表的是每一帧都会被分成4段执行） ，参数direction代表了动画方向（start和end）

start是第一帧动画结束时的状态。

end是第一帧动画开始时的状态。

frames()函数

作用：

**iii. 重复值(了解）：**具有关键词的值和函数值组合（不常用） 如下：

​ animation-timing-function: ease step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

iiii.其他值

inherit （继承）

initial （初始值）

unset（未设置）

4）animation-delay属性：

**作用：**设置动画的延时时间（动画在多长时间后开始）

**值：**值是数字，单位是秒（s）或毫秒（ms）

5）animation-iteration-count属性：

**作用：**设置动画的播放次数。

值：

数字类型的值：例如2代表播放2次；0为不播放；数字值可以为小数（如：1.5表示循环1.5遍；也就是第二次只播放动画的一半)

关键词的值：infinite（无限次的循环）

以下用法了解即可（你玩呢！用第一个值不就行了吗?绕圈圈）：

/* 转来转去还是播放一次 */
animation-iteration-count: 1,2,infinite;

6）animation-direction属性：

**作用：**指示动画是否反向播放。

值：

**normal：**默认值，表示动画向前循环。

**alternate：**交替播放（正向播放，再反向播放），反向运行时，动画按步后退，同时，timing-function的值也反向，比如，ease-in 在反向时成为 ease-out。。

**reverse：**反向运行动画，每周期结束动画由尾到头运行

**alternate-reverse：**反向交替，反向开始交替。动画第一次运行时是反向的，然后下一次是正向，后面依次循环。

7）animation-fill-mode属性：

**作用：**设置动画播放完毕后的状态。

值：

**none（默认值）：**无状态

**forwards：**动画的状态保持在最后一个关键帧（比如100%）的最终结果。

forwards值会受animation-direction和animation-iteration-count两个属性的影响。

backwards：动画开始立即使用第一个关键帧（取决于animation-direction属性）的值。

**both：**会遵循forwards和backwards的规则（动画开始立即使用第一关键帧的状态，并且使动画保持最后一个关键帧的效果。）

forwards和both的区别：

如果有animation-delay属性的时候，forwards属性会在animation-delay时间结束后生效；而both会忽略animation-delay属性立即生效。

8）animation-play-state:

**作用：**设置动画的播放和暂停

**running：**动画正在播放。

**paused：**动画已暂停。

**应用场景：**用户在执行某一个行为的时候，修改动画的播放状态。

总结：animation简写属性：

/* @keyframes name | duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state */
animation: slidein 3s ease-in 1s 2 reverse both paused;