javascript - CSS フェード左から右

Question

CSS のみを使用して、要素 (少なくともテキストのみ) を左から右に、またはその逆にフェードアウトする方法はありますか?

これが私が意味することの例です：

実際、jQuery が必要な場合は、2 番目の優先事項として、それも受け入れます。

Answer 1

はい、CSS3 アニメーションで実行できます (ブラウザのサポートはこちらで確認してください)。

これは text-fadingの簡単なデモです。

HTML:

.text {
        position:relative;
        line-height:2em;
        overflow:hidden;
    }
    .fadingEffect {
        position:absolute;
        top:0; bottom:0; right:0;
        width:100%;
        background:white;
        -moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */
        -webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */
        -ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */
        -o-animation: showHide 5s ease-in alternate infinite; /* Opera */
        animation: showHide 5s ease-in alternate infinite;
    }
    @-webkit-keyframes showHide { /* Chrome, Safari */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @-moz-keyframes showHide { /* FF */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @-ms-keyframes showHide { /* IE10 */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @-o-keyframes showHide { /* Opera */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @keyframes showHide {
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }

<div class="text">
    There is some text here!
    <div class="fadingEffect"></div>
 </div>

CSS:

ご覧のとおり、境界線にははっきりとしたコントラストがあります。純粋な白の背景の代わりに画像のグラデーションを使用すると、レンダリングが向上します。

次に、IE9 以下の jQuery フォールバックを使用できます。

Answer 2

Photoshop またはその他の画像編集ソフトウェアで、中央が透明で、すべての側面が真っ白にフェードアウトする円形の領域を作成します。必要に応じて上下を自由にトリミングしてください。次に、css トランジションを使用してグラフィックを左から右にアニメーション化し、デモで効果を得ることができます。トランジションをサポートしていない IE などのブラウザーの場合は、jquery の cssHooks 機能を使用して、jQuery でアニメーションを実行します。

CSS グラデーションを使用してこの効果を作成することもできますが、ブラウザーのサポートの問題が発生し、CSS グラデーションでトランジションを使用するとパフォーマンスが非常に悪くなります。ただし、png24 を単純にアニメーション化するのは非常に簡単で、同じ効果が得られます。