Transisi CSS3 - Efek fade out

96

Saya mencoba untuk menerapkan efek "fade out" di CSS murni. Ini biolanya . Saya memang melihat beberapa solusi online, namun, setelah membaca dokumentasi online , saya mencoba mencari tahu mengapa animasi slide tidak berfungsi. Ada petunjuk?

.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>
Luaskan cuplikan

css css-transitions Penny Liu
sumber

Jawaban:

96

Anda dapat menggunakan transisi sebagai gantinya:

.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;
}
karthikr
sumber
3
tidak perlu awalan browser akhir-akhir ini cukup biasa saja ... transisi: opacity 3s easy-in-out;
danday74
177

Inilah cara lain untuk melakukan hal yang sama.

efek fadeIn

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

efek fadeOut

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

UPDATE 1: Saya menemukan tutorial terbaru CSS3 Transition: fadeIn dan fadeOut like effects untuk menyembunyikan elemen acara dan Tooltip Contoh: Tampilkan Sembunyikan Petunjuk atau Teks Bantuan menggunakan Transisi CSS3 di sini dengan kode contoh.

UPDATE 2: (Detail tambahan diminta oleh @ big-money)

Saat menampilkan elemen (dengan beralih ke kelas yang terlihat), kami ingin visibilitas: terlihat langsung masuk, jadi tidak masalah untuk hanya mentransisikan properti opacity. Dan saat menyembunyikan elemen (dengan beralih ke kelas tersembunyi), kami ingin menunda visibilitas: deklarasi tersembunyi, sehingga kami dapat melihat transisi fade-out terlebih dahulu. Kami melakukan ini dengan mendeklarasikan transisi pada properti visibility, dengan durasi 0 detik dan penundaan. Anda dapat melihat artikel detailnya di sini.

Saya tahu saya terlambat untuk menjawab tetapi memposting jawaban ini untuk menghemat waktu orang lain. Semoga membantu Anda !!

immayankmodi
sumber
10
Jawaban bagus, saya ingin menambahkan display:noneuntuk menghapus kotak saat animasi "sembunyikan" berakhir, tahu?
Apolo
1
Saya tidak yakin apa yang Anda butuhkan di sini tetapi Anda dapat mencoba display:blockalih-alih visibility: visibledi .visiblekelas juga display:nonedaripada visibility: hiddendi .hiddenkelas dari contoh di atas.
immayankmodi
4
@MMTac Itu tidak berfungsi karena displaybukan salah satu properti CSS yang dapat dianimasikan . Lihat Animasi dari "display: block" ke "display: none" .
peterflynn
@MayankModi apa poin 0 pertama tentang visibilitas untuk efek fadeOut? Menurut pemahaman saya, Anda hanya perlu 2s
Big Money
1
@BigMoney itu untuk durasi dan penundaan (pasti Anda dapat mengubah nomor-nomor itu sesuai kebutuhan Anda, yang digunakan hanya sebagai contoh). Periksa Saya telah memperbarui detailnya karena jawaban ini masih aktif.
immayankmodi
13

Karena displaybukan salah satu properti CSS yang dapat dianimasikan. Satu display:nonepengganti animasi fadeOut dengan animasi CSS3 murni, cukup setel width:0dan height:0pada frame terakhir, dan gunakan animation-fill-mode: forwardsuntuk menyimpan width:0dan height:0properti.

@-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;
}
Rui Wang
sumber
1
Lihat Animasi Kinerja Tinggi . Anda harus menghindari penggunaan properti CSS yang memicu tata letak ulang, widthdan heightkeduanya sensitif.
Penny Liu
4

Ini adalah kode yang berfungsi untuk pertanyaan Anda.
Nikmati Coding ....

<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>
Vishal Biradar
sumber
Harap lampirkan penjelasan tentang solusi Anda: bagaimana cara kerjanya? mengapa ini berbeda dari solusi lain yang sudah diposting?
lifeisfoo
@lifeisfoo Saya mencoba di atas semua solusi, tetapi ini adalah cara yang sederhana dan termudah untuk melakukannya dan satu hal yang lebih penting adalah teks akan memudar secara otomatis setelah beberapa detik (10). Jadi tidak perlu klik apapun.
Vishal Biradar
3

Anda lupa menambahkan properti posisi ke .dummy-wrapkelas, dan nilai atas / kiri / bawah / kanan tidak berlaku untuk elemen yang diposisikan secara statis (default)

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

Jason Yaraghi
sumber
Terima kasih, tetapi bagaimana saya akan bersembunyi setelah transisi sama sekali?
Ada beberapa cara - Anda dapat meningkatkan topnilainya sehingga memindahkan "off" viewport atau Anda dapat menggunakan opacity untuk animasi sehingga memudar seperti yang Anda inginkan ..
Jason Yaraghi
1
hebat .. Saya mengerti, tapi satu pertanyaan lagi, Mengapa div tersembunyi kembali menghilang?
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;
}

demo di sini.


sumber