Animasi CSS3: tampilan + opasitas

102

Saya punya masalah dengan animasi CSS3.

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

Kode ini hanya berfungsi jika saya menghapus perubahan display.

Saya ingin mengubah tampilan tepat setelah hover tetapi opacity harus diubah menggunakan transisi.

animation css Alexis Delrieu
sumber
2
Jika CSS tidak berfungsi seperti yang disarankan orang lain, berikut adalah kode Javascript yang sangat sederhana untuk memudar.
Abhranil Das

Jawaban:

119

Berdasarkan jawaban Michaels ini adalah kode CSS yang sebenarnya untuk digunakan

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}
Chris
sumber
1
untuk mendukung semua browser ..?
david_adler
CSS3 tidak didukung di semua browser. Jika Anda ingin memperpanjang cukup tambahkan awalan yang benar
Chris
17
Bagaimana dengan saat mengarahkan kursor keluar, bagaimana cara menerapkan fadeOutToNone?
Hijau
4
Karena Anda dapat menggunakan pecahan persen, praktik yang lebih baik adalah menggunakan sesuatu seperti 0,001% daripada 1% karena meminimalkan penundaan untuk "memulai", yang dapat menjadi jelas dengan durasi animasi yang lebih lama
Zach Saucier
1
Direktif -o-keyframes sebenarnya tidak berguna karena versi Opera pertama yang mendukung animasi sudah berbasis webkit.
Rico Ocepek
43

Anda dapat melakukannya dengan animasi CSS:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;
Michael Mullany
sumber
Ide bagus, saya berhasil tetap menampilkan elemen saya selama hover dengan mode animasi-isi tetapi kemudian saya mengarahkan mouse, elemen tersebut menghilang.
Alexis Delrieu
2
Anda dapat menggunakan mode isian: maju untuk mempertahankan perubahan setelah animasi selesai.
Michael Mullany
42

Jika memungkinkan - gunakan visibilitysebagai penggantidisplay

Misalnya:

.child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}
tomas.satinsky
sumber
24
Masalah dengan properti visibility adalah ini tidak menyembunyikan elemen, hanya membuatnya tidak terlihat. Jadi masih akan memakan tempat.
Samuel
6
Tidak hanya tidak terlihat, tetapi juga transparan terhadap peristiwa (klik, dll). Tidak mengubah tampilan berarti tidak mengubah dokumen, yang merupakan hal yang baik. Sebagian besar elemen yang harus memudar masuk / keluar melalui opasitas mungkin harus memiliki posisi tetap atau absolut.
Rasmus Kaj
13

Solusi ini berfungsi:

  1. tentukan "bingkai utama":

    @-webkit-keyframes fadeIn { 
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

  2. Gunakan "bingkai utama" ini saat "arahkan kursor":

    div a span { 
  display: none;
}

div a:hover span {
  display: block;

  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-name: fadeIn;
  animation-duration: 1s;
}
Hermann Schwarz
sumber
9

Saya menggunakan ini untuk mencapainya. Mereka memudar saat melayang tetapi tidak mengambil ruang saat disembunyikan, sempurna!

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover .child {
    height: auto;
    opacity: 1;
    visibility: visible;
}
felixhirschfeld
sumber
6

Saya berubah sedikit tetapi hasilnya indah.

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

Terimakasih semuanya.

Alexis Delrieu
sumber
4
Ini tidak berfungsi baik dengan pembaca layar: Mereka akan terus membaca konten.
ehdv
1
Anda dapat menambahkan visibility: hidden;ke .child / visibility:visible;ke hover dan ini akan memperbaiki masalah pembaca layar
csilk
6

Ada metode lain yang bagus untuk menyelesaikan ini dengan menggunakan pointer-events:

.child {
    opacity: 0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

Sayangnya, ini tidak didukung di IE10 dan di bawahnya.

RafaelKr
sumber
4

Saya memiliki masalah yang sama. Saya mencoba menggunakan animasi alih-alih transisi - seperti yang disarankan oleh @MichaelMullany dan @Chris - tetapi itu hanya berfungsi untuk browser webkit bahkan jika saya menyalin-tempel dengan awalan "-moz" dan "-o".

Saya bisa mendapatkan sekitar masalah dengan menggunakan visibilitybukannyadisplay . Ini berfungsi untuk saya karena elemen anak saya position: absolute, jadi aliran dokumen tidak terpengaruh. Mungkin berhasil untuk orang lain juga.

Beginilah tampilan kode asli menggunakan solusi saya:

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}
Dave
sumber
Jika Anda mengarahkan kembali ke anak saat bergerak keluar dari tampilan, itu akan masuk kembali karena elemen hanya disembunyikan. Cukup mengganggu jika Anda menggerakkan mouse di sekitar tempat itu.
adamj
4

Jika Anda memicu perubahan dengan JS, katakanlah saat mengklik, ada solusi yang bagus.

Anda melihat masalah terjadi karena animasi diabaikan di display: tidak ada elemen kecuali browser menerapkan semua perubahan sekaligus dan elemen tidak pernah display: blok sementara tidak dianimasikan pada saat yang sama.

Triknya adalah meminta browser untuk merender bingkai setelah mengubah visibilitas tetapi sebelum memicu animasi.

Berikut adalah contoh JQuery:

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);
daniel.sedlacek
sumber
2
Pertanyaan ini tidak di-tag dengan JavaScript atau jQuery
j08691
Saya tahu, saya menulisnya untuk menjelaskan alasan hal ini terjadi. Itu sangat berguna bagi saya ketika saya belajar tentang ini dan saya berharap ini akan membantu orang lain juga.
daniel.sedlacek
1
Btw, nilai Opasitas antara 0 dan 1
Amr
2

Pada elemen absolut atau tetap, Anda juga bisa menggunakan z-index:

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

Elemen lain harus memiliki indeks-z antara -100 dan 100 sekarang.

Luca Steeb
sumber
Sayangnya itu mengacaukan simbol indikator kata sandi KeePass di type=passwordbidang. Ini tidak terlihat.
philk
1
Bisakah kita berhenti menggunakan nomor indeks-z yang berubah-ubah? Di sini: z-index: 1; vs z-index: -1 sudah cukup. Memilih nomor indeks-z yang besar membuat segala sesuatunya tidak dapat diatur.
dudewad
2

Saya tahu, ini bukanlah solusi untuk pertanyaan Anda, karena Anda memintanya

tampilan + opasitas

Pendekatan saya memecahkan pertanyaan yang lebih umum, tetapi mungkin ini adalah masalah latar belakang yang harus diselesaikan dengan menggunakan displaykombinasi denganopacity .

Keinginan saya adalah menyingkirkan Elemen saat tidak terlihat. Solusi ini melakukan persis seperti itu: Ini memindahkan elemen keluar, dan ini dapat digunakan untuk transisi:

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

Kode ini tidak mengandung awalan browser atau retasan kompatibilitas mundur. Itu hanya menggambarkan konsep bagaimana elemen dipindahkan karena tidak diperlukan lagi.

Bagian yang menarik adalah dua definisi transisi yang berbeda. Saat penunjuk mouse mengarahkan .parentelemen, .childelemen harus segera dipasang dan opasitas akan berubah:

transition: left 0s, visibility 0s, opacity 0.8s;

Jika tidak ada hover, atau penunjuk mouse dipindahkan dari elemen, seseorang harus menunggu hingga perubahan opasitas selesai sebelum elemen dapat dipindahkan dari layar:

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

Memindahkan objek akan menjadi alternatif yang layak jika pengaturan display:nonetidak akan merusak tata letak.

Saya harap saya tepat sasaran untuk pertanyaan ini meskipun saya tidak menjawabnya.

Hannes Morgenstern
sumber
Filter Microsoft itu sudah tidak digunakan lagi sejak IE9. Adakah alasan khusus Anda ingin menambahkannya ke jawaban di tahun 2016?
TylerH
@TylerH Berapa banyak pengguna yang ingin dijangkau adalah masalah selera.
Hannes Morgenstern
Mengingat itu sudah usang , dan IE <11 tidak lagi didukung oleh Microsoft, menggunakan properti itu adalah hal yang patut dipertanyakan.
TylerH
@TylerH Merupakan hal yang umum untuk mengakomodasi klien yang tidak akan atau tidak dapat meningkatkan ke browser yang lebih baru. Saya memiliki bank terkenal sebagai klien yang masih menggunakan IE6 dan menolak untuk meningkatkan karena "alasan".
Marcus Cunningham
@MarcusCunningham Pertanyaan ini ditandai dengan css3 yang menghalangi penggunaan IE6 (dan IE7 dan IE8) seluruhnya. Dalam OP browser yang paling awal mungkin telah menulis kode untuk, filter MS dalam jawaban ini sudah usang. Dan untuk pembaca yang akan datang , itu bahkan lebih tidak berguna karena tidak didukung. Tidak ada alasan untuk memasukkannya ke dalam jawaban atas pertanyaan ini. Namun, ini bisa diperdebatkan, karena Hannes telah menghapusnya dari jawabannya.
TylerH
1

Satu hal yang saya lakukan adalah menyetel margin status awal menjadi sesuatu seperti "margin-left: -9999px" sehingga tidak muncul di layar, lalu setel ulang "margin-left: 0" pada status hover. Dalam kasus itu, simpan "display: block". Melakukan trik untuk saya :)

Edit: Simpan status dan tidak kembali ke status hover sebelumnya? Ok disini kita butuh JS:

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>
Joshua
sumber
Ide bagus, tapi kemudian saya mouseout, elemennya menghilang ...
Alexis Delrieu
Alexis, bukankah itu yang ingin kamu lakukan? Hover berarti HANYA saat mengarahkan mouse Anda. Mohon klarifikasi apa yang ingin Anda capai.
Joshua
Ya maaf. Saya ingin menyimpan fade di mouseout.
Alexis Delrieu
Itu mengubah segalanya. Hampir. Pada dasarnya yang Anda inginkan adalah fungsi JS yang akan mendeteksi status hover, seperti yang ditunjukkan pengguna lain, dan menambahkan ... yah ... lihat jawaban saya yang diperbarui.
Joshua
1

Untuk memiliki animasi di kedua cara onHoverIn / Out saya melakukan solusi ini. Semoga bisa membantu seseorang

@keyframes fadeOutFromBlock {
  0% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }
}

@keyframes fadeInFromNone {
  0% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }

  1% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }
}

.drafts-content {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  animation: fadeInFromNone 1s ease-in;
  will-change: opacity, transform;

  &.hide-drafts {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
    animation: fadeOutFromBlock 0.5s ease-out;
    will-change: opacity, transform;
  }
}
Nicholas
sumber
0

CARA MENGANIMASI OPASITAS DENGAN CSS:
ini adalah kode saya:
kode CSS

.item {   
    height:200px;
    width:200px;
    background:red;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}
<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>
Luaskan cuplikan

atau periksa file demo ini

function vote () {
var vote = getElementById ("yourOpinion")
jika (this.workWithYou):
vote + = 1};
lol

zakizakibzr
sumber
1
Tidak menjawab pertanyaan, karena displayproperti itu baru saja dihapus.
Bersulang
-4

display:tidak dapat dialihkan. Anda mungkin perlu menggunakan jQuery untuk melakukan apa yang ingin Anda lakukan.

Hantu Madara
sumber
3
Anda harus berhenti menganjurkan jQuery di mana-mana.
Benjamin Gruenbaum
1
@BenjaminGruenbaum jQuery adalah pria yang luar biasa. Itu hebat dan melakukan semua hal.
Hantu Madara