利用@keyframe及animation作一个页面Loading时的小动画

前言

利用@keyframe规则和animation经常使用属性作一个页面Loading时的小动画。

1  @keyframe规则简介

• @keyframes定义关键帧，即动画每一帧执行什么。
  
  要使用关键帧, 先建立一个带名称的@keyframes规则，以便后续使用 animation-name 这个属性来调用指定的@keyframes. 每一个@keyframes 规则包含多个关键帧，也就是一段样式块语句，每一个关键帧有一个百分比值做为名称，表明在动画进行中，在哪一个阶段触发这个帧所包含的样式。 关键帧的编写顺序没有要求，最后只会根据百分比按由小到大的顺序触发。

• 语法

  @keyframes <identifier> {
    [ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
  }
  
  <identifier>
  帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
  from
  等效于 0%.
  to
  等效于 100%.

• 注意⚠️：@keyframes 不能在内联样式中使用

2  animation经常使用属性简介

• animation定义动画每一帧如何执行。
  该属性容许配置动画时间、时长以及其余动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现。
• animation的属性

  1 animation-delay
  设置延时，即从元素加载完成以后到动画序列开始执行的这段时间，单位通常为秒（s）或毫秒（ms），若为负值表示跳过前几秒执行。
  2 animation-direction
  设置动画在每次运行完后是反向运行仍是从新回到开始位置重复运行。

  • normal：默认值，动画按正常播放;

  • reverse：动画反向播放;

  • alternate：动画在奇数次正向播放，在偶数次反向播放；

  • alternate-reverse：动画在奇数次反向播放，在偶数次正向播放；

  • initial：设置该属性为它的默认值；

  • inherit：从父元素继承该属性。

  3 animation-duration
  设置动画一个周期的时长。
  4 animation-iteration-count
  设置动画重复次数， 能够指定infinite无限次重复动画
  5 animation-name
  指定由@keyframes描述的关键帧名称。
  6 animation-play-state
  容许暂停和恢复动画。
  

  • paused：指定动画暂停；

  • running：指定动画运行；

  7 animation-timing-function
  设置动画速度， 即经过创建加速度曲线，设置动画在关键帧之间是如何变化。
  8 animation-fill-mode
  指定动画执行先后如何为目标元素应用样式。

   

3 实例：一个页面Loading时的小动画

• 点击此处查看动画效果
• 代码以下

  /*一个loading动画*/
  /*@keyframes规则*/
  @keyframes pageLoading{     /*用“0%-100%”或者“from-to”均可以*/
      from{
          width: 0px;height: 0px; opacity: 1;      /*渐变改变宽度和高度，而且设置opacity,使颜色愈来愈淡*/
      }
      to{
          width: 100px;height: 100px;opacity: 0;
      }
  }
  /*画一个页面居中的圆形*/
  .loading{
      width: 400px;
      height: 400px;
      position: relative;
  }
  .loading:before,
  .loading:after {
      position: absolute;      /*必定要绝对定位，否则不会出现*/
      content: '';
      width: 0px;
      height: 0px;
      border-radius: 50%;
      top: 0;bottom: 0;left: 0;right: 0;margin:auto;  /*元素页面居中，必定要将上下左右的值设置为0*/
      background: rgb(71, 71, 71);
      animation: pageLoading 1s linear infinite;   /*动画渐变变大，linear infinite让动画不断渐变不要停*/
  }
  /*如今咱们须要让后一个圆比前一个圆后渐变*/
  .loading:after{
      animation-delay: 0.5s;
  }