堆栈内存溢出
  繁体   English   中英

CSS3关键帧动画无法在Firefox和IE中运行

[英]CSS3 keyframe animation not working in firefox and IE

 原文  2013-12-19 07:25:52  0   1    internet-explorer/ css3/ firefox/ css-animations

问题描述

我的css代码适用于chrome和safari，但不适用于Firefox，IE和Opera。 当我创建@keyframes rotate {}时，对于其他浏览器，这不适用于这4行： animation-duration: 4s;
animation-timing-function: linear; animation-name:"rotate"; animation-iteration-count: infinite; 或关键帧方法？ 我怎样才能解决这个问题？

CSS： 

@-webkit-keyframes rotate {
0% {
    -webkit-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
    background-color:#2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
}  

  13% {
    -webkit-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
  }
  25% {
  -webkit-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
  }
  38% {
  -webkit-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
  }
  50% {
  -webkit-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
  }
  63% {
  -webkit-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
  }
  75% {
  -webkit-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
  }
  88% {
  -webkit-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
  }
    100% {
    -webkit-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
    }
}
/************** F I R E F O X ***********************/
@-moz-keyframes rotate {
0% {
    -moz-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
    background-color:#2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
}  

  13% {
    -moz-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
   }
  25% {
  -moz-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
  }
  38% {
  -moz-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
  }
  50% {
  -moz-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
  }
  63% {
  -moz-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
  }
  75% {
  -moz-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
  }
  88% {
  -moz-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
  }
    100% {
    -moz-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
    }
}
/************************************/
@keyframes rotate {
    0% {
    transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px)     rotate(0deg);
    background-color:#2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    }  

  13% {
    transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
   }
  25% {
  transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
  }
  38% {
  transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
  }
  50% {
  transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
  }
  63% {
  transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
  }
  75% {
  transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
  }
  88% {
  transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
  }
        100% {
    transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
        }
        }
    /************** I E ***********************/
@-ms-keyframes rotate {
    0% {
    -ms-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
    background-color:#2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    }  

  13% {
    -ms-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
   }
  25% {
  -ms-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
  }
  38% {
  -ms-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
  }
  50% {
  -ms-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
  }
  63% {
  -ms-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
  }
  75% {
  -ms-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
  }
  88% {
  -ms-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
  }
    100% {
    -ms-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
    }
}
/************************************/
@-o-keyframes rotate {
0% {
    -o-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
    background-color:#2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    }  

  13% {
    -o-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
   }
  25% {
  -o-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
  }
  38% {
  -o-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
  }
  50% {
  -o-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
  }
  63% {
  -o-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
  }
  75% {
  -o-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
  }
  88% {
  -o-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
  }
    100% {
    -o-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}

/*************************************/
#circle {
height: 10px;
width: 10px;
border-radius:25px;
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);

-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-name:"rotate";
-webkit-animation-iteration-count: infinite;

animation-duration: 4s;
animation-timing-function: linear;
animation-name:"rotate";
animation-iteration-count: infinite;

-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-name:"rotate";
-moz-animation-iteration-count: infinite;

-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-name:"rotate";
-ms-animation-iteration-count: infinite;

-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-name:"rotate";
-o-animation-iteration-count: infinite;

position:absolute;
left:-1%;
top:-1%; 
}

1 个解决方案

解决方案1
 7 已采纳  2013-12-19 11:23:46

从动画名称中删除双引号（ rotate而不是"rotate" ）。

然后它会工作：

运行演示 

-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-name:rotate;
-webkit-animation-iteration-count: infinite;

-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-name:rotate;
-moz-animation-iteration-count: infinite;

-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-name:rotate;
-ms-animation-iteration-count: infinite;

-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-name:rotate;
-o-animation-iteration-count: infinite;

animation-duration: 4s;
animation-timing-function: linear;
animation-name:rotate;
animation-iteration-count: infinite;

请记住，非前缀属性必须始终是特定于供应商之后的最后一个属性。

PS：如果您不知道，有些站点在编译时为您的代码添加前缀（如Prefixr ），甚至在运行时（如无前缀 ）。

顺便说一句+1，你的动画很漂亮:)

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS3动画无法在IE9中使用 css3 Swing动画在IE中不起作用 IE中的CSS旋转器关键帧动画抖动 CSS3渐变背景可在Chrome和Firefox中使用，但不能在IE 11中使用 IE中的CSS3动画错误 CSS3动画播放状态的简写在IE和Safari中不起作用 IE8 / 9中的CSS3动画 最小宽度在IE中的@keyframe动画中不起作用 CSS3和PIE在IE 8中不起作用 CSS转换和动画无法在IE中运行（适用于Firefox / Chrome）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM