web-dev-qa-db-ja.com

CSSは左から右にフェードします

CSSのみを使用して、要素（少なくともテキストのみ）を左から右にフェードインおよびフェードアウトする方法、またはその逆の方法はありますか？

これが私の言いたいことの例です：

enter image description here

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

javascriptjquerycssfade
9
Bobe

はい、CSS3アニメーションでそれを行うことができます（ ここでブラウザのサポートを確認してください ）。

これが簡単な テキストフェード のデモです。

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フォールバックを使用できます。

17
Giona

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

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

1
Geuis