html - CSS3 フェード アニメーション

Question

フェードインとフェードアウトする 2 つの CSS3 アニメーションを結合しようとしています。誰でもこれで私を助けることができますか？
これは私がこれまでに持っているものです -

jsフィドル

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