一 . 基本用法

关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。这个就需要和对应的SVG中的自己的动画进行对比；它具有有交互性比SVG的动画的情况多一点；比如常用的鼠标移入或者点击通常是可以在js中进行交互的；在以SVG为标签的节点中使用SVG动画并且进行交互会局限比较多；

JavaScript 可以通过 CSS对象模型的 CSSKeyframesRule(en-US) 接口来访问 @keyframes。
通过这种接口我们可以动态的懂过js来添加css中的keyFrames中的动画；

  1.  let key = 0
  2.  const findKeyframesRule = (rule) => {
  3.       //此处过滤非同源的styleSheet，因为非同源的无法访问cssRules，会报错
  4.       var ss = Array.from(document.styleSheets).filter((styleSheet) => !styleSheet.href || styleSheet.href.startsWith(window.location.origin))
  5.       for (var i = 0; i < ss.length; ++i) {
  6.         for (var j = 0; j < ss[i].cssRules.length; ++j) {
  7.           if (ss[i].cssRules[j].type === window.CSSRule.KEYFRAMES_RULE && ss[i].cssRules[j].name === rule) {
  8.             key=j
  9.             return ss[i]
  10.           }
  11.         }
  12.       }
  13.       return null
  14.  }
  16.  // 基于 document.styleSheets 我们可以获取对应的CSS文件以链路加载的文件都Keyframes的效果；
  17.  // DocumentOrShadowRoot.styleSheets
  18.  // 接口定义的只读属性，它会返回一个StyleSheetList / CSSStyleSheet 对象，
  19.  // 这个对象对应的是通过引入或者嵌入文档中的样式表。

说明：返回的列表中，排序规则如下：

  • header标签中通过link标签引入的样式优先，多个link样式表以出现顺序排序
  • 接着是在文档中定义的样式表，存在多个这样的样式表时，以tree order（译注：先序深度优先遍历树）规则进行排序

二 . SVG动画

对比svg的动画而言；svg动画可以做到复杂的效果；比如你可以通过AE去导出，利用某一种svg的路径就可以展示出来；只不过在AE中可能有一些的效果到处的json会无法解析；但是对于这种效果的大部分情况都是可以做到；
但是对于某一些的效果的控制会比较差；比如动态去传入的一些数据到SVG的内部就会比较麻烦；当对比如果是在Dom中的元素的css的话；就会变得相对方便一点；因为在js中控制dom的一些操作是比较容易的

  1. <rect x="-10" y="-10" width="20" height="20"
  2.     style="fill: #ff9; stroke: black;">
  3.     <animateTransform attributeType="XML"
  4.       attributeName="transform" type="scale"  
  5.       from="1" to="4 2"
  6.       begin="0s" dur="4s" fill="freeze"/>
  7. </rect>

很难去操作某一处或者动画中某一帧的效果所有的动画需要事先都要在组织好