html - CSS3 淡化动画

Question

我正在尝试结合 2 个淡入淡出的 CSS3 动画。谁能帮我这个？
这是我到目前为止所拥有的 -

jsFiddle

Answer 1

好的，你的问题相应地更新了我的答案，你能做的最好和最少的就是这样

演示

需要实际标记 + 样式（除非所有浏览器都完全支持 CSS3 动画，否则不要使用它）

HTML

<div class="out"><span>example</span></div>

CSS

div {
   animation:demo 7s;
   -moz-animation:demo 7s; /* Firefox */
   -webkit-animation:demo 7s; /* Safari and Chrome */
   -o-animation:demo 7s; /* Opera */
   animation:demo 7s infinite;
}

@keyframes demo {
   0% {opacity:0;}
   50% {opacity:1;}
   100% {opacity:0;}
}

@-moz-keyframes demo { /* Firefox */
   0% {opacity:0;}
   50% {opacity:1;}
   100% {opacity:0;}
}

@-webkit-keyframes demo { /* Safari and Chrome */
   0% {opacity:0;}
   50% {opacity:1;}
   100% {opacity:0;}
}

@-o-keyframes demo { /* Opera */
   0% {opacity:0;}
   50% {opacity:1;}
   100% {opacity:0;}
}