http://jsfiddle.net/L7pV9/embedded/result/
例を見たい人のために jSfiddle を追加しました
とにかく、CSS3 アニメーションで何が起こっているのか、一生わかりません。2 つのスパン クラスがあり、1 つは Text1 とラベル付けされ、もう 1 つは Text2 とラベル付けされています。
アニメーションが実行されると、単語がフェードアウトしてから 2 番目のラベルがフェードインし、その逆も同様です。問題は、アニメーションの 2 回目の実行で label1 が再びスポーンすることですが、ラベル 2 がオーバーラップ/食べているように見えるため、しばらくの間だけです。アニメーションがグリッチに見えないようにするにはどうすればよいですか?また、ラベルが均等に再生成されるようにするにはどうすればよいですか?
text2 が終了すると text1 を呼び出すように見えますが、text1 はそれほど長くは続かず、何度も何度も繰り返します。
これがコードです。CSS
.logoText{
display: inline;
padding: 3px 0 0 0;
}
.logoText span {
background: #0c0d0f;
padding-right: 100px;
position: absolute;
opacity: 0;
overflow: hidden;
float: left;
color: #6f6f6f;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
-webkit-animation: fadeText 10s linear infinite 0s;
-moz-animation: fadeText 10s linear infinite 0s;
-o-animation: fadeText 10s linear infinite 0s;
-ms-animation: fadeText 10s linear infinite 0s;
animation: fadeText 10s linear infinite 0s;
}
.logoText span:first-child {
background: #0c0d0f;
}
.logoText span:nth-child(2) {
background: #0c0d0f;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-o-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
}
CSSアニメーション
@-webkit-keyframes fadeText {
0% { opacity: 0; -webkit-transform: translateY(-2px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
97% { opacity: 1; -webkit-transform: translateY(0px); }
98% { opacity: 0; -webkit-transform: translateY(2px); }
100% { opacity:0; -webkit-transform: translateY(2px); }
}
HTML
<div class="logoText">
<span>Text1</span>
<span>Text2</span>
</div>