1

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>
4

1 に答える 1

2

あなたは不均等な方法で時間を分配します、そしてそれはあなたが得るものです:

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

}

87% の確率で完全に不透明になります (10 から 97)。半分の不透明度は 11% の確率で、完全な透明度はわずか 2% の確率です。

次に、ほとんどの場合、前にある div のみが表示されます。

タイムラインの 10% をトランジションに均等に配分する場合は、次のようになります。

@-webkit-keyframes fadeText {
    0% { opacity: 0; -webkit-transform: translateY(-2px); }
   10% { opacity: 1; -webkit-transform: translateY(0px); }
   50% { opacity: 1; -webkit-transform: translateY(0px); } 
   60% { opacity: 0; -webkit-transform: translateY(2px); } 
  100% { opacity: 0; -webkit-transform: translateY(2px); }
}

始めたときと同じ状態で終わるのもいいでしょう。最初の translateY は正 (2px) である必要がありますか?

于 2013-10-22T20:01:02.977 に答える