动画

# 基本使用

@keyframes demo1 {
  //开头定义动画名称
  0%{
    transform: translateX(0);
  }
  //0%和100%是节点，里面的内容是节点结果
  100%{
    transform: translateX(100px);
  }

1
2
3
4
5
6
7
8
9

//需要使用的动画名称
  animation-name: demo1;
  //动画完成经历的时间
  animation-duration: 2s;

1
2
3
4

0%是动画开始，100%是动画完成

@keyframes wchange {

  0%{
    width: 250px;
  }
  50%{
    width: 800px;
  }
  100%{
    width: 300px;
  }

}

1
2
3
4
5
6
7
8
9
10
11
12
13

节点自己设置就可以了，百分比要是整数就行

animation-iteration-count: infinite;

动画执行的次数，默认是1，数字自己改，infinite就是无限次

animation-timing-function: steps(5);

这个是动画曲线属性，一般使用默认值，

这里要提的是一个steps 是分成多少步来完成每一步之间有空隙

animation-direction: alternate;

这个是下次播放是逆向还是正常，逆向就是alternate，正常的就是normal,默认是normal

#two:hover{
  animation-play-state: paused;
}

1
2
3

暂停还是播放，暂停是paused，播放是running，比如可以设置，鼠标经过停止

//保持结束状态
  animation-fill-mode: forwards;
  //回到开始状态
animation-fill-mode: backwards;

1
2
3
4

注意这个属性，不能和无限循环一起用，不然冲突

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态

animation：demo 2s esae 2s infinite alternate

上次更新: 2021/08/13, 23:21:49