栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

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

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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


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

  • -
    SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
  • -

    一个svg加载旋转动画:

    
    
 
    

svg + css3 实现动画:(注意这里只去除animateTransform部分)




svg {
 position: absolute;
 z-index: 2;
 top: 50%;
 margin-top: -20px;
 
      }

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;
 }



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




    
    
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243164.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号