Question

在我的html页面中，我有一些样式的代码（闪烁文本）

#blink{
 -webkit-animation-direction: normal;
-webkit-animation-duration:.3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colours;
-webkit-animation-timing-function: none;
-moz-animation-direction: normal;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: colours;
-moz-animation-timing-function: none;
}
     @-webkit-keyframes colours {
 0% {color: white; color: #00FF00;color: white;}
 25% {color: #00FF00;}
 50% {color: white;}
 75% {color: #00FF00;}
100% {color: white;}


@-moz-keyframes colours {
     0% {color: white; color: #00FF00; color: white;}
     25% {color: #00FF00;}
     50% {color: white;}
     75% {color: #00FF00;}
    100% {color: white;}
 }

问题是，这适用于谷歌浏览器和使用span id的其他浏览器，但它似乎没有在Firefox中闪烁，为什么这样，我需要添加什么？

Answer 1

像这样使用css

＆＃13;

<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}
</style>

＆＃13;

CSS3动画浏览器兼容性问题

1 个答案: