动画属性

animation属性

animation:

1. 动画的执行，不需要有用户的动作

2. animation动画的执行次数，是我们可以人为的控制的

transition:

1. transition动画的执行，需要有用户动作

2. transition动画的执行次数，依赖于用户的动作是否在进行【有用户的动作就执行，没有就结束】

语法：

@keyframes 动画序列名称 {

  from {

      开始状态

  } 

  to {

      结束状态

  }

}

或者

@keyframes 动画序列名称 {

  0%{

      开始状态

  } 

  100%{

      结束状态

  }

}

步骤：

1。 定义动画集

2。 通过animation属性去调用执行动画

| @keyframes                          | 定义动画

| animation-name                    | 规定 @keyframes 动画的名称。

| animation-duration                | 规定动画完成一个周期所花费的时间。

| animation-timing-function    | 规定动画的速度曲线。默认是 "ease"，steps（步数）

| animation-delay                    | 规定动画何时开始。默认是 0。

| animation-iteration-count      | 规定动画被播放的次数。默认是 1。还有 infinite

| animation-direction                | 动画是否在下一周期逆向地播放。默认是 "normal"，alternate逆播放

| animation-play-state              | 规定动画是否正在运行或暂停。默认是 "running"。还有“paused”

| animation-fill-mode              | 规定动画结束后状态，保持 forwards 回到起始 backwards

| animation                              | 所有动画属性的简写属性

合写属性：

1.必须设置动画名称和动画时间。

2.各属性之间没有顺序要求。

3.如果同时设置了动画执行时间和延时时间，那么第一个时间永远都是执行时间。

总结：

1.一个元素可以同时调用多个动画集。

2.animation合写时，不同的动画集之间使用“，”隔开。

3.如果希望实现多状态，可以配合动画延时完成。