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;}
}