123

純粋な 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;}
}
<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>

4

8 に答える 8

213

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

フェードイン効果

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

フェードアウト効果

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

UPDATE 1: さらに最新のチュートリアルCSS3 トランジション: 表示要素とツールチップを非表示にするためのフェードインとフェードアウトのような効果を見つけました。

UPDATE 2:(@big-money から要求された詳細を追加)

要素を表示するとき (visible クラスに切り替えることによって)、 をvisibility:visibleすぐに開始したいので、 opacity プロパティのみを移行しても問題ありません。また、(非表示のクラスに切り替えて) 要素を非表示にする場合は、visibility:hidden宣言を遅らせて、フェードアウト遷移を最初に確認できるようにします。これを行うには、可視性プロパティで遷移を宣言し、持続時間と遅延を 0 に設定します。詳細な記事はこちらでご覧いただけます。

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

于 2014-01-03T18:07:03.120 に答える
119

代わりにトランジションを使用できます。

.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;
}
于 2013-05-17T14:38:13.127 に答える
3 
.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;
}

ここでデモ。

于 2014-07-01T13:55:29.353 に答える