Question

我希望CSS中的fadein和fadeout效果不应该停止（应该是连续的）。我创建了一个：http://jsfiddle.net/z5UB5/

代码：

CSS：

body { background: #fff; }

@-webkit-keyframes 'blink' {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.objblink {
-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

    -webkit-animation-direction: normal;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in-out;   
}

HTML：

<p class="objblink">TEST</p>

但此代码仅适用于Google Chrome。我希望它也适用于其他主流浏览器。

Answer 1

你可以在jsfiddle看到我的修改，我的动画定义更简短：

-moz-animation: blink 2s ease-in-out infinite normal;
-webkit-animation: blink 2s ease-in-out infinite normal;  
animation: blink 2s ease-in-out infinite normal;

添加-moz和@keyframes语法，并从blink中删除单引号。您可以看到动画at Mozilla Dev Network

的简写语法

Answer 2

如果您对jQuery解决方案持开放态度，那么这应该适合您：

$(document).ready(function(){
    shown = true;
    setInterval(function(){
        if(shown == true)
            $(".objblink").fadeOut();
        else
            $(".objblink").fadeIn();

        shown = !shown;
    },500);
});

Here是JSFiddle

Answer 3

作为您的最新小提琴，您已使用单引号声明动画名称。删除那个，它会工作。

而不是这个

@-moz-keyframes 'blink' {
0% {
    opacity:1;
}
50% {
    opacity:0;
}
100% {
    opacity:1;
}
}

使用此

@-moz-keyframes blink {
0% {
    opacity:1;
}
50% {
    opacity:0;
}
100% {
    opacity:1;
}
}

DEMO

Answer 4

CSS:
.objblink{
    -webkit-animation: myfirst 3s;
    animation:myfirst 3s;
 }
@keyframes myfirst {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
HTML:
<p class="objblink">TEST<meta http-equiv="refresh" content="3" /></p>

在css中连续淡化和淡出效果

4 个答案: