CSS3动画无效

 George_唐晓龙 发布于 2023-01-08 15:30

我使用css3为SVG创建了一个动画,它在Chrome和Firefox中完美运行.它部分在Safari中工作但不能在Internet Explorer中工作(支持css动画的IE9 +)

见演示

CSS:

@-webkit-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

@-ms-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

@-moz-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}


@keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

#Layer_1 { 
    margin-left: auto; 
    margin-right : auto;  
    top: 50%; 
    position: absolute; 
    left: 50%; 
    margin-left: -65px; 
    margin-top: -35px;   
}

svg {
  background: #fff;
  display: block;
}

svg * {
  stroke: #666;
  #stroke: #17739D;
  stroke-width: 1;
  fill-opacity: 0;
  stroke-dasharray: 350;
  stroke-dashoffset: 440;
}

svg #bp_svg * {

  -webkit-animation-name : dash;
  -moz-animation-name : dash;
  -ms-animation-name : dash;
  animation-name : dash;

  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -ms-animation-duration: 4s;
  animation-duration: 4s;

  -webkit-animation-timing-function : linear;
  -moz-animation-timing-function : linear;
  -ms-animation-timing-function : linear;
  animation-timing-function : linear;

  -webkit-animation-fill-mode : forwards;
  -moz-animation-fill-mode : forwards;
  -ms-animation-fill-mode : forwards;
  animation-fill-mode : forwards;
}

任何人都可以帮我理清如何使其在Safari和IE中正常工作吗?

撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有