svg动画animateTransform即将废除，改为css3 animation实现

svg 内嵌标签animateTransform即将废除，即需使用css3来实现动画

• -
  SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
• -
  
  一个svg加载旋转动画：

<!-- 用svg实现： -->
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
    <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
    <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z">
        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"/>
    </path>
</svg>

svg + css3 实现动画：（注意这里只去除animateTransform部分）

<style>
/* css3 代码 */

svg {
        position: absolute;
        z-index: 2;
        top: 50%;
        margin-top: -20px;
        /* 以上代码是固定发送动画位置用的 */
      }
/* 设置svg第二个path标签样式，此处也可以自定义className，不用nth-child(n)选择器 */
svg path:nth-child(2) {
          animation: svg-load .5s linear infinite;
          -webkit-animation: svg-load .5s linear infinite;
          -moz-animation: svg-load .5s linear infinite;
          -o-animation: svg-load .5s linear infinite;
        }

/* animation */

@keyframes svg-load {
  from {
    transform:rotate(0);
    transform-origin: 20px 20px;
  };
  to {
    transform:rotate(360deg);
    transform-origin: 20px 20px;
  }
}
</style>

<!-- html代码 -->
<svg version="1.1" class="sending" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
    <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
    <path fill="#666" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z"></path>
</svg>