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

Jawaban:

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:

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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