web-dev-qa-db-ja.com

CSS3 Transition-フェードアウト効果

私は、純粋なCSSで「フェードアウト」効果を実装しようとしています。これが fiddle です。オンラインでいくつかの解決策を検討しましたが、 documentation online を読んだ後、スライドアニメーションが機能しない理由を見つけようとしています。ポインタはありますか？

ここにHTMLがあります

<div class="dummy-wrap">
    <div class="success-wrap successfully-saved">Saved</div>
</div>

CSS

.dummy-wrap {
    animation: slideup 2s;
    -moz-animation: slideup 2s;
    -webkit-animation: slideup 2s;
    -o-animation: slideup 2s;
}
.success-wrap {
    width: 75px;
    min-height: 20px;
    clear: both;
    margin-top: 10px;
}
.successfully-saved {
    color: #FFFFFF;
    font-size: 20px;
    padding: 15px 40px;
    margin-bottom: 20px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #00b953;
}
@keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
@-moz-keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
@-webkit-keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
@-o-keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
csscss3css-transitions
70
user2246087

代わりに遷移を使用できます：

.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}
71
karthikr

同じことを行う別の方法を次に示します。

フェードイン効果

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

フェードアウト効果

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

UPDATE 1:最新のチュートリアルが見つかりました CSS3トランジション：表示要素を非表示にするフェードインとフェードアウトのようなエフェクト および ツールチップの例：CSS3トランジションを使用してヒントまたはヘルプテキストを表示 こちらサンプルコード付き。

UPDATE 2:（@ big-moneyが要求した詳細を追加）

（visibleクラスに切り替えて）要素を表示するときに、visibility：visibleをすぐに開始する必要があるため、opacityプロパティのみを移行してもかまいません。また、要素を非表示にする（非表示のクラスに切り替える）ときに、最初にフェードアウト遷移を確認できるように、visibility：hidden宣言を遅らせます。これを行うには、可視性プロパティで遷移を宣言し、期間を0秒にして遅延を設定します。詳細な記事を見ることができます こちら

私は答えるには遅すぎることを知っていますが、他の人の時間を節約するためにこの答えを投稿します。それがあなたを助けることを願っています!!

126
Mayank Modi

displayはアニメーション可能なCSSプロパティではありません。 1つdisplay：none fadeCSアニメーションを純粋なcss3アニメーションに置き換え、最後のフレームでwidth：0およびheight：を設定し、animation-fill-mode ：forwards width：0およびheight：0プロパティを保持します;

@-webkit-keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}  
@keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}

.display-none.on{
    display: block;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}
5
Rui Wang

.dummy-wrapクラスに位置プロパティを追加するのを忘れて、上/左/下/右の値が静的に配置された要素に適用されない（デフォルト）

http://jsfiddle.net/dYBD2/2/

3
Adrift
.fadeOut{
    background-color: rgba(255, 0, 0, 0.83);
    border-radius: 8px;
    box-shadow: silver 3px 3px 5px 0px;
    border: 2px dashed yellow;
    padding: 3px;
}
.fadeOut.end{
    transition: all 1s ease-in-out;
    background-color: rgba(255, 0, 0, 0.0);
    box-shadow: none;
    border: 0px dashed yellow;
    border-radius: 0px;
}

ここにデモ

3
user669677

これはあなたの質問の作業コードです。
コーディングをお楽しみください...

<html>
   <head>

      <style>

         .animated {
            background-color: green;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;animation-duration: 10s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         }

         @-webkit-keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeOut"></div>

   </body>
</html>
2
Vishal Biradar