Question

第一个动画在Firefox中运行，但最后一个不起作用。可能是什么问题？
有没有我错过的东西？

CSS：

#container {
    width:300px;
    height: 250px;
    /*overflow:hidden;*/
}
#image{
    display: block;
    width: 300px;
    height: 250px;
    float:left;
    position: relative;
}
h1{
    color: #aaba38;
    font-size: 26px;
    font-weight: bold;  
}
#title{
    position: relative;
    -webkit-animation: mailigen 20s infinite; /* Chrome, Safari, Opera */ 
    animation: mailigen 20s infinite;   
}
#slide{
    float:left; position: relative; width:200px; text-align:right;
    position: relative;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */ 
     -moz-animation: mymove 20s infinite;
       -o-animation: mymove 20s infinite;
            animation: mymove 20s infinite;

}
#slide2{
    position: relative;
    -webkit-animation: mymove2 20s infinite; /* Chrome, Safari, Opera */ 
     -moz-animation: mymove2 20s infinite;
       -o-animation: mymove2 20s infinite;
            animation: mymove2 20s infinite;    

}
#slide3{
    position: relative;
    -webkit-animation: circle2 20s infinite; /* Chrome, Safari, Opera */ 
    -moz-animation: circle2 20s infinite;
       -o-animation: circle2 20s infinite;
            animation: circle2 20s infinite;    

}
#slide4{
    position: relative;
    -webkit-animation: circle3 20s infinite; /* Chrome, Safari, Opera */ 
     -moz-animation: circle3 20s infinite;
       -o-animation: circle3 20s infinite;
            animation: circle3 20s infinite;

}
/* Chrome, Safari, Opera TITLE*/ 
@-webkit-keyframes mailigen {
    0%   {right: 0px;}
    5%  {right: 210px;} 
    10%  {right: 210px;} 
    100%  {right: 210px;} 
}
/* Standard syntax */
@keyframes mailigen {
    0%   {right: 0px;}
    5%  {right: 210px;} 
    10%  {right: 210px;} 
    100%  {right: 210px;}
}

/* Chrome, Safari, Opera  FOR SLIDE1*/ 
@-webkit-keyframes mymove {
    0%   {right: 0px;}
    5%  {right: 210px;}
    10%  {right: 210px;}
    20%  {right: 0px;}
    100% {right: 0px;}     
}
/* Standard syntax */
@keyframes mymove {
    0%   {right: 0px;}
    5%  {right: 210px;}
    10%  {right: 210px;}
    20%  {right: 0px;} 
    100% {right: 0px;}  
}

/* Chrome, Safari, Opera  FOR CIRCLE 1*/ 
@-webkit-keyframes mymove2 {
    20%   {right: 0px;}
    25%  {right: 260px;}
    30%  {right: 260px;}
    40%  {right: 0px;} 
    100% {right: 0px;}   
}
@-moz-keyframes mymove2 {
    20%   {right: 0px;}
    25%  {right: 260px;}
    30%  {right: 260px;}
    40%  {right: 0px;} 
    100% {right: 0px;}   
}
@-o-keyframes mymove2 {
    20%   {right: 0px;}
    25%  {right: 260px;}
    30%  {right: 260px;}
    40%  {right: 0px;} 
    100% {right: 0px;}   
}
/* Standard syntax */
@keyframes mymove2 {
    20%   {right: 0px;}
    25%  {right: 260px;}
    30%  {right: 260px;}
    40%  {right: 0px;} 
    100% {right: 0px;}
}
/* Chrome, Safari, Opera  FOR CIRCLE 2*/ 
@-webkit-keyframes circle2 {
    40%   {right: 0px;}
    45%   {right: 0px;}
    50%  {right: 260px;}
    60%  {right: 0px;}
    100% {right: 0px;}
 }
/* Standard syntax */
@keyframes circle2 {
    40%   {right: 0px;}
    45%   {right: 0px;}
    50%  {right: 260px;}
    60%  {right: 0px;}
    100% {right: 0px;} 
}
/* Chrome, Safari, Opera  FOR CIRCLE 3*/ 
@-webkit-keyframes circle3 {
    60%   {right: 0px;}
    65%   {right: 0px;}
    70%  {right: 260px;}
    80%  {right: 0px;} 
    100% {right: 0px;}    
}
/* Standard syntax */
@keyframes circle3 {
    60%   {right: 0px;}
    65%   {right: 0px;}
    70%  {right: 260px;}
    80%  {right: 0px;} 
    100% {right: 0px;} 
}
.first, .second, .third{
    float: left;
    position: relative;
    width: 200px;
    left: 300px;
    top: -260px;
    text-align: right;
}
.second{padding-bottom:20px;}   
/* CIRCLE ONE */
.circle {
    position: absolute;
    left: 320px;
    top: 39px;
    border-radius: 50%;
    width: 180px;
    height: 180px; 
    background-color: #bec751;
    opacity: 0.8;
    border: 5px solid #ffffff;
    /* width and height can be anything, as long as they're equal */
}
.circle span {
     color: #ffffff;
     font-family: Arial;
    font-size: 23px;
    left: 40px;
    position: relative;
    font-weight: bold;
    text-transform: uppercase;
    top: 37px;
    text-align: center ;
}
/* CIRCLE TWO */
.circle2 {
    position: absolute;
    left: 320px;
    top: 39px;
    border-radius: 50%;
    width: 180px;
    height: 180px; 
    background-color: #843881;
    opacity: 0.8;
    border: 5px solid #ffffff;
    /* width and height can be anything, as long as they're equal */
}
.circle2 span {
    color: #ffffff;
    font-family: Arial;
    font-size: 23px;
    left: 40px;
    position: relative;
    font-weight: bold;
    text-transform: uppercase;
    top: 37px;
    text-align: center ;
}
/* CIRCLE THREE */
.circle3 {
    position: absolute;
    left: 320px;
    top: 39px;
    border-radius: 50%;
    width: 180px;
    height: 180px; 
    background-color: #146671;
    opacity: 0.8;
    border: 5px solid #ffffff;
    /* width and height can be anything, as long as they're equal */
}
.circle3 span {
    color: #ffffff;
    font-family: Arial;
    font-size: 23px;
    left: 40px;
    position: relative;
    font-weight: bold;
    text-transform: uppercase;
    top: 37px;
    text-align: center ;
}

Answer 1

您没有为圆圈动画设置@ -moz关键帧。添加

 @-moz-keyframes circle2 {
        40%   {right: 0px;}
        45%   {right: 0px;}
        50%  {right: 260px;}
        60%  {right: 0px;}
        100% {right: 0px;}
     }

每个动画的CSS结尾。有关详细信息，请参阅此答案

Why isn't -moz-animation working?

Answer 2

所以正确的答案是，需要为其他Chrome浏览器提供0％和100％

@-moz-keyframes circle2 {
        0%   {right: 0px;}
        40%   {right: 0px;}
        45%   {right: 0px;}
        50%  {right: 260px;}
        60%  {right: 0px;}
        100% {right: 0px;}
     }

动画不适用于Firefox

2 个答案: