Bagaimana cara menerapkan transisi CSS3 ke semua properti kecuali background-position?

109

Saya ingin menerapkan transisi CSS ke semua properti selain dari background-position. Saya mencoba melakukannya dengan cara ini:

.csstransitions a {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.csstransitions a {
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;
}

Pertama saya mengatur semua properti ke transisi dan kemudian saya mencoba untuk hanya menimpa transisi untuk properti background-position.

Namun ini sepertinya juga mengatur ulang semua properti lainnya - jadi pada dasarnya tidak ada transisi yang terjadi lagi.

Adakah cara untuk melakukan ini tanpa mencantumkan semua properti?

css css-transitions

— Makan malam
sumber

1

Hai, saya sebenarnya sedang mencari masalah ini. Apakah Anda mendapatkan jawaban yang dapat diterima?

— Milche Patern

144

Berikut solusi yang juga berfungsi di Firefox:

transition: all 0.3s ease, background-position 1ms;

Saya membuat demo kecil: http://jsfiddle.net/aWzwh/

— Felix Edelmann
sumber

3

Untuk beberapa alasan 1mstidak berhasil untuk saya, tetapi 0berhasil.

— Flimm

@Flimm, browser apa yang Anda gunakan? Dan apa yang Anda maksud dengan "tidak berfungsi", tidak menganimasikan apa pun?

— Felix Edelmann

1

Bagi saya 1mstidak berhasil, tetapi 1ms noneberhasil! @ericsoco 0msatau 0sbekerja juga.

— BCoder

3

Satuan waktu HARUS memiliki satuan. Jadi 0 tidak berfungsi seperti 4 tidak akan berfungsi, tetapi 4 akan berfungsi sebagaimana 0 akan berfungsi.

— ESR

2

Saya sudah mencari ini begitu lama, terima kasih, @FelixEdelmann !!

— tatsu

17

Semoga tidak terlambat. Itu dilakukan hanya dengan menggunakan satu baris!

-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;

Itu berfungsi di Chrome. Anda harus memisahkan properti CSS dengan koma.

Berikut adalah contoh yang berfungsi: http://jsfiddle.net/H2jet/

— aldo.roman.nurena
sumber

6

Saya mencoba ini di Chrome, dan sepertinya tidak berhasil untuk saya. Properti alltransisi tampaknya mengesampingkan yang lain apa pun yang terjadi.

— animuson

2

Menarik. Saya kira saya belum mengujinya dengan properti lain. Ketika saya mencoba color 0itu berhasil, tetapi itu pasti tidak berhasil background-position 0. Bahkan background 0tidak membuahkan hasil untuk saya ... Berikut adalah jsFiddle yang saya buat dari menu Gaming.SE. Sejujurnya saya hanya menguji background-positionawalnya karena itulah pertanyaan yang secara khusus disebutkan dan merupakan pertanyaan yang saya coba ubah sendiri.

— animuson

2

Dulu berfungsi di chrome untuk saya. Ini masih berfungsi di IE11 tetapi mulai minggu ini semua properti sekarang menimpa apa pun di kemudian hari.

— cirrus

1

Seperti yang dikatakan @cirrus, Chrome tidak lagi menghormati durasi 0 detik, tetapi Anda dapat membuatnya berfungsi dengan memberikan durasi yang sangat singkat, seperti.1ms

— GetFree

1

Ini berfungsi di Chrome dan Firefox jika durasi selain nol detik disediakan.

— Naisheel Verdhan

4

Coba ini...

* {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}
a {
    -webkit-transition: background-position 1ms linear;
    -moz-transition: background-position 1ms linear;
    -o-transition: background-position 1ms linear;
    transition: background-position 1ms linear;
}

— Siva
sumber

Jawaban "coba ini" bukan yang terbaik. Lebih baik penjelasan tentang apa yang Anda lakukan.

— random_user_name

2

Anda dapat mencoba menggunakan cara W3C standar:

.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }

http://jsfiddle.net/H2jet/60/

— lucianmarin
sumber

2

Bagi siapa pun yang mencari cara singkat, untuk menambahkan transisi untuk semua properti kecuali untuk satu properti tertentu dengan penundaan , ketahuilah bahwa ada perbedaan bahkan di antara browser modern.

Demo sederhana di bawah ini menunjukkan perbedaannya. Lihat kode lengkapnya

div:hover {
  width: 500px;
  height: 500px;
  border-radius: 0;
  transition: all 2s, border-radius 2s 4s;
}

Chrome akan "menggabungkan" dua animasi (seperti yang saya harapkan), seperti di bawah ini:

Sementara Safari "memisahkan" itu (yang mungkin tidak diharapkan):

Cara yang lebih kompatibel adalah Anda menetapkan transisi khusus untuk properti tertentu, jika Anda mengalami penundaan untuk salah satunya.

— iplus26
sumber

Memang. Ini adalah wawasan kritis. Betapa lemahnya hal itu adalah harus menentukan setiap properti secara individual daripada all, ada gunanya untuk mengetahui bahwa itu satu-satunya cara untuk mendapatkan perilaku yang diinginkan di seluruh browser.

— random_user_name

1

Mencoba:

-webkit-transition: all .2s linear, background-position 0;

Ini berhasil bagi saya pada sesuatu yang serupa ..

— StuR
sumber

memperbaiki background-position ke 0 is not = untuk menghapus transisi dari background-position. Bukan?

— Milche Patern

1

Ini tidak akan pernah berhasil. Dengan mendefinisikan kembali properti transisi setelahnya, Anda mengganti sepenuhnya properti transisi sebelumnya, seolah-olah tidak pernah ada. Mereka tidak terkonsolidasi.

— animuson