Bir elemanda birden fazla CSS geçişi nasıl yapılır?

327

Bu oldukça basit bir soru ama CSS geçiş özellikleri hakkında çok iyi belgeler bulamıyorum. İşte CSS snippet'i:

    .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);
}

Gördüğünüz gibi geçiş özelliklerinin üzerine yazılıyor. Durduğu gibi, metin gölgesi canlandırılacak, ancak renk değil. İkisini aynı anda canlandırmalarını nasıl sağlarım? Yanıtlarınız için teşekkürler.

animation css css-transitions

— Eric Thoma
kaynak

Unutmayın bu transition: allsafari / ipad için çok adamcağız: joelglovier.com/writing/…

— Oğuzhan Kahyaoğlu

584

Geçiş özellikleri, geçişleri destekleyen tüm tarayıcılarda virgülle sınırlandırılmıştır:

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

easevarsayılan zamanlama işlevidir, bu nedenle belirtmeniz gerekmez. Gerçekten istiyorsanız linear, belirtmeniz gerekir:

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

Bu tekrarlı olmaya başlar, bu nedenle aynı zamanları ve zamanlama işlevlerini birden fazla mülkte kullanacaksanız, devam etmek ve transition-*steno yerine çeşitli özellikleri kullanmak en iyisidir :

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

— coreyward
kaynak

11

Dönüşümün siparişin önemli olduğu bir zincir olduğunu varsayıyorum, bu yüzden fonksiyonel zincirlemeye

— alışkınsanız

1

CSS'deki geçişler hakkında genel bir yorum olarak, birbiri ardına birden fazla geçiş tanımına sahip olmanın işe yaramayacağını ve bunu başarmak için bunların aynı tanımda olması gerektiği unutulmamalıdır (burada SA'da olduğu gibi). CSS'nin temel kurallarına göre, "en son" kuralı uygulanır, bu nedenle ayrı satırlarda birden fazla tanım varsa, yalnızca son tanım uygulanır. FYI

— TheCuBeMan

37

Ayrıca aşağıdakilerle de önemli ölçüde şunları yapabilirsiniz:

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

— XML
kaynak

44

Aksi belirtilmedikçe varsayılan olarak bu "tümünü" kaldırabilirsiniz.

— joshnh

13

Mükemmel bir nokta için +1, ancak bence bunu orada tutmanın, özellikle ekipler arasında tutarlılık ve anlayış açısından yararlı olduğunu düşünüyorum.

— XML

4

Buna dikkat et! Cep telefonları için geliştiriliyorsa, donanım hızlandırmalı öğelerle birlikte, yeni cihazları glitchy ve eski cihazları kullanılamaz hale getirir.

— Ilya Karnaukhov

2

Teşekkürler, @ CanerŞahin. İnsanların bu noktayı anlamalarına yardımcı olacak herhangi bir belge veya karşılaştırma aracı verebilir misiniz? Ayrıca, 'tümünü' hiçbir belirteç kullanmaktan daha kötü gösteren kanıtlar görüyor musunuz?

— XML

3

@XML Açıklanmasının iki olumsuz etkisi vardır. 1, tarayıcı 'tüm' kullanımı nedeniyle ekstra kaynaklar ekler. Tarayıcı, daha az performans gösteren ve sayfa boşluğu oluşturabilen değişiklikleri bekleyen bu öğeyi yakından dinleyecektir. 2, bir geliştirici daha sonra beklenen veya gerekli olmayabilir geçiş yapılacak bir arka plan rengini koyarsa beklenmedik efektler oluşturabilir.

— Stefan Burt

29

Aşağıdaki gibi bir şey aynı anda birden fazla geçişe izin verecektir:

-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;

Örnek: http://jsbin.com/omogaf/2

— Delan Azabani
kaynak

24

Tüm özellikleri aynı animasyonlu hale getirirseniz, kodu tekrarlamamanıza izin verecek şekilde her birini ayrı ayrı ayarlayabilirsiniz.

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

Burada daha fazlası var: Birden fazla özelliğe sahip CSS geçiş kestirme?

İstenmeyen davranış ve beklenmedik performans isabetleri ile sonuçlanabilir, çünkü tüm özelliğini (geçiş özelliği 'tüm' üzerine yazar) kullanmaktan kaçınır.

— Corey Young
kaynak

2

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

— LocoRoco
kaynak

1

İşte iki özelliği aynı anda geçirmek için bir LESS karışımı:

.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;
}

— Mark P
kaynak

otomatik düzeltici daha da güzel!

— yeniden yazılarak

otomatik düzeltici + stylus FTW.

— Jason Lydon

1

Süre, gecikme ve zamanlama fonksiyonu için farklı değerlerle ayarlanmış çoklu geçişler yapmak mümkündür. Farklı geçişleri bölmek için,

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

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

— Nesha Zoric
kaynak

0

Özellikleri birlikte belirtmekten kaçınmak da mümkündür.

#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
kaynak