Question

我正在使用css3为文本制作动画，我有一个线性文本动画，在Chrome中运行得很完美，但它并没有在Mozilla中进行动画制作。有人帮忙吗？

<div class='visible'>
<p>
  Hello
</p>
<ul>
  <li>world !</li>
  <li>Bob !</li>
  <li>users !</li>
</ul>

.content:after,
.content:before {
  color: #16a085;
  font-size: 42px;
  animation: 2s linear 0 normal none infinite opacity;
  -webkit-animation: 2s ease-out 0 normal none infinite opacity;
  -moz-animation: 2s ease-out 0 normal none infinite opacity;
  -o-animation: 2s ease-out 0 normal none infinite opacity;
}

ul {
  margin-top: 0;
  padding-left: 110px;
  text-align: left;
  list-style: none;
  animation: 6s linear 0 normal none infinite change;
  -webkit-animation: 6s linear 0 normal none infinite change;
  -moz-animation: 6s linear 0 normal none infinite change;
  -o-animation: 6s linear 0 normal none infinite change;
}

@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes change {
  0% {
    margin-top: 0;
  }
  15% {
    margin-top: 0;
  }
  25% {
    margin-top: -40px;
  }
  40% {
    margin-top: -40px;
  }
  50% {
    margin-top: -80px;
  }
  65% {
    margin-top: -80px;
  }
  75% {
    margin-top: -40px;
  }
  85% {
    margin-top: -40px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes change {
  0% {
    margin-top: 0;
  }
  15% {
    margin-top: 0;
  }
  25% {
    margin-top: -40px;
  }
  40% {
    margin-top: -40px;
  }
  50% {
    margin-top: -80px;
  }
  65% {
    margin-top: -80px;
  }
  75% {
    margin-top: -40px;
  }
  85% {
    margin-top: -40px;
  }
  100% {
    margin-top: 0;
  }
}

这里是jsfiddle链接：http://jsfiddle.net/ion_torres/hzqE8/

Answer 1

嗯，你必须说延迟是几秒钟。

例如：animation: 6s linear 0s normal none infinite change;

Firefox在某种程度上很棘手。

（ps：这里jsFiddle使用相同的订单，只需添加秒数即可。

Answer 2

我的动画也不适用于Mozilla和safari，但它在chrome上完美运行这是我的代码：

  .menu-getboarder {
    /* border-right : 1px solid; */
    -webkit-animation-name: blink ;
            animation-name: blink ;
    -webkit-animation-duration: .5s ;
            animation-duration: .5s ;
    -webkit-animation-timing-function: step-end ;
            animation-timing-function: step-end ;
    -webkit-animation-iteration-count: infinite ;
            animation-iteration-count: infinite ;
    -webkit-animation-direction: alternate ;
            animation-direction: alternate ;
    }

@-webkit-keyframes blink {
    0% {
        -wbekit-border-right: 0px;
    }

    50% {
        -webkit-border-right: 1px solid black;
    }

    100% {
        -webkit-border: 0px;
    }}

@keyframes blink {
    0% {
        border-right: 0px;
    }

    50% {
        border-right: 1px solid black;
    }

    100% {
        border: 0px;
    }}

@-moz-keyframes blink {
    0% {
        border-right: 0px;
    }

    50% {
        border-right: 1px solid black;
    }

    100% {
        border: 0px;
    }}

CSS3 Keyframes动画在Mozilla Firefox中不起作用

2 个答案: