Bagaimana cara melakukan beberapa transisi CSS pada suatu elemen?

327

Ini pertanyaan yang cukup mudah tetapi saya tidak dapat menemukan dokumentasi yang sangat bagus tentang properti transisi CSS. Berikut ini cuplikan CSS:

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

Seperti yang Anda lihat, properti transisi saling menimpa. Seperti berdiri, teks-bayangan akan hidup, tetapi bukan warnanya. Bagaimana cara membuat mereka berdua hidup secara bersamaan? Terima kasih atas jawaban apa pun.

animation css css-transitions

— Eric Thoma
sumber

Jangan lupa bahwa transition: allini sangat tidak aman untuk safari / ipad: joelglovier.com/writing/…

— Oğuzhan Kahyaoğlu

584

Properti transisi dibatasi koma di semua browser yang mendukung transisi:

.nav a {
  transition: color .2s, text-shadow .2s;
}

easeadalah fungsi pengaturan waktu default, jadi Anda tidak perlu menentukannya. Jika Anda benar-benar ingin linear, Anda harus menentukannya:

transition: color .2s linear, text-shadow .2s linear;

Ini mulai berulang-ulang, jadi jika Anda akan menggunakan waktu dan fungsi pengaturan waktu yang sama di beberapa properti, lebih baik Anda melanjutkan dan menggunakan berbagai transition-*properti alih-alih singkatan:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

— intinya
sumber

11

Saya berasumsi karena transformasi adalah rantai di mana urutan penting, sehingga sintaks terasa menyenangkan jika Anda terbiasa dengan perangkaian fungsional, sedangkan transisi memerlukan daftar elemen yang tidak sepenuhnya bebas, sehingga koma sesuai

— mirichan

1

Sebagai komentar umum tentang transisi dalam CSS, kita harus ingat bahwa memiliki beberapa definisi transisi satu demi satu tidak akan berfungsi, dan untuk mencapai itu, ini harus dalam definisi yang sama (seperti dalam SA di sini). Dengan aturan dasar CSS, aturan "terbaru" berlaku, jadi jika ada beberapa definisi di baris yang berbeda, hanya definisi terakhir yang akan diterapkan. FYI

— TheCuBeMan

37

Anda juga dapat secara signifikan dengan:

.nav a {
    -webkit-transition: all .2s;
}

— XML
sumber

44

Anda benar-benar dapat menghapus 'semua' karena itu adalah default kecuali ditentukan lain.

— joshnh

13

Memberi +1 untuk poin yang sangat baik, tetapi saya pikir ini sangat berguna untuk menyimpannya di sana, terutama untuk konsistensi dan pemahaman di seluruh tim.

— XML

4

Waspadalah ini! Jika berkembang untuk ponsel, dalam kombinasi dengan elemen akselerasi perangkat keras, membuat perangkat baru glitchy dan perangkat lama tidak dapat digunakan.

— Ilya Karnaukhov

2

Terima kasih, @ CanerŞahin. Bisakah Anda memberi kami dokumentasi atau alat tolok ukur yang akan membantu orang untuk memahami hal ini? Juga, apakah Anda melihat bukti yang menunjukkan 'semua' lebih buruk daripada tidak menggunakan specifier sama sekali?

— XML

3

@XML Cara itu dijelaskan ada dua efek negatif. 1, Browser menambahkan sumber daya tambahan karena penggunaan 'semua'. Browser akan mendengarkan dengan cermat elemen yang menunggu perubahan yang kurang berkinerja dan dapat membuat halaman jank. 2, Dapat membuat efek yang tidak terduga jika pengembang kemudian menempatkan dalam warna latar belakang yang kemudian akan ditransisikan yang mungkin tidak diharapkan atau diperlukan.

— Stefan Burt

29

Sesuatu seperti berikut ini akan memungkinkan untuk beberapa transisi secara bersamaan:

-webkit-transition: color .2s linear, text-shadow .2s linear;
   -moz-transition: color .2s linear, text-shadow .2s linear;
     -o-transition: color .2s linear, text-shadow .2s linear;
        transition: color .2s linear, text-shadow .2s linear;

Contoh: http://jsbin.com/omogaf/2

— Delan Azabani
sumber

24

Jika Anda membuat semua properti beranimasi sama, Anda dapat mengatur masing-masing secara terpisah yang memungkinkan Anda untuk tidak mengulangi kode.

 transition: all 2s;
 transition-property: color, text-shadow;

Ada lebih banyak di sini: singkatan transisi CSS dengan beberapa properti?

Saya akan menghindari penggunaan properti semua (properti transisi menimpa 'semua'), karena Anda dapat berakhir dengan perilaku yang tidak diinginkan dan hit kinerja yang tidak terduga.

— Corey Young
sumber

2

.nav a {
    transition: color .2s, text-shadow .2s;
}

— Locoroco
sumber

1

Ini adalah mixin yang KURANG untuk mentransisikan dua properti sekaligus:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

— Markus P
sumber

autoprefixer bahkan lebih bagus!

— ditulis ulang

autoprefixer + stylus FTW.

— Jason Lydon

1

Dimungkinkan untuk membuat beberapa transisi diatur dengan nilai yang berbeda untuk fungsi durasi, waktu tunda dan waktu. Untuk membagi berbagai transisi gunakan,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

Referensi: https://kolosek.com/css-transition/

— Nesha Zoric
sumber

0

Dimungkinkan juga untuk tidak menentukan properti secara keseluruhan.

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }

— jerblack
sumber