CSS魔法堂：更丰富的前端动效by CSS Animation

前言

?在中我们了解到对于简单的补间动画，我们可以通过transition实现。那到底多简单的动画适合用transtion来实现呢？答案就是——我们只需定义动画起始和结束帧的状态的动画。一旦关键帧数大于2时，我们必须转向CSS Animation了。本文为这段时间学习的记录，欢迎拍砖。

简单粗暴介绍CSS Animation 规则和属性

定义关键帧动画

语法：

@keyframes  {
  [ {
    /* CSS Properties */
  }]*
}

示例：

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

注意项：
1.的命名规范

// 命名需要遵循以下规则
const rIsInvalid = /^--|^[0-9]+-|^(?:unset|initial|inherit|none)$/
    , rIsValid = /^[0-9a-z-_\\]+$/i
function isValidAnimationName(animationName: string): boolean{
  return !rIsInvalid.test(animationName) && rIsValid(animationName)
}

2.取值
0-100%、from，等价与0%、 to，等价与100%。
3.重复怎么办
@keyframes CSS规则不支持层叠样式，因此当出现多个同名keyframes，那么仅最后出现的那个有效。

/* 无效 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* 生效 */
@keyframes rotate {
  from { transform: rotate(90deg); }
  to { transform: rotate(-360deg); }
}

4.重复怎么办
与@keyframes CSS规则一样，标准规定相同的关键帧不产生层叠，仅最后出现的认定为有效。
但实际上FireFox14+和Chrome均将关键帧设计为可层叠的。

@keyframes rotate {
  from { transform: rotate(0deg); }
  from { background: red; }
  /* 上述两条time offset实际上等价于
   * from { transform: rotate(0deg); background: red; }
   */
  to {
    transform: rotate(360deg);
    background: yellow;
  }
}

5.!important导致属性失效
一般情况下使用!important会让CSS属性获得最高权重，但在@keyframes下却会导致该CSS属性失效。

@keyframes rotate {
  from {
    transform: rotate(90deg);
    background: red!important; /* background属性无效 */
  }
  to { transform: rotate(-360deg); }
}

6.必须提供至少两个关键帧

/* 不会根据缓动函数产生动画效果，而是在动画持续时间的最后瞬间移动过去 */
@keyframes move-left{
   to {
	   left: 100px;
   }
}

使用动画

 {
  animation: 
             
             
             
             
             
             
             ;
}

示例：

.box.rotate {
  animation: rotate 10s infinite alternate;
}

子属性介绍

，指定通过@keyframes定义的补间动画名称。
，动画持续时长，默认为0s。单位为s和ms。
，动画播放延迟，默认为0s。单位为s和ms。
，动画重复播放次数，默认为1，infinite表示无限循环。动画播放总时长为*。
，可选值为normal | reverse | alternate | alternate-reverse，分别表示动画播放顺序是从from到to，从to到from，从from到to再从to到from和从to到from再从from到to。注意：设置alternate|alternate-reverse时，animation-iteration-count必须大于1才能看到效果
，可选值为none | forwards | backwards | both，用于设置动画开始前和结束后是否应用0%和100%的样式对元素上。分别表示不应用，应用100%的样式，延迟播放期间应用0%的样式和0%和100%的样式均应用。
注意：

1. 默认情况下(none)，动画结束后会恢复动画前的样式；
2. 设置backwards时，https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
   https://designmodo.com/steps-css-animations/
   http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/
   http://jsfiddle.net/simurai/CGmCe/
   https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/