SORU
13 AĞUSTOS 2011, CUMARTESİ


Nasıl bir öğe üzerinde birden fazla CSS geçişler var?

Oldukça basit bir soru ama CSS geçiş özelliği çok iyi belgelerine bulamıyorum. Burada CSS parçacığı:

    .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ş özelliklerini birbirleri üzerine. Bu haliyle, metin-gölge, ama bu renk değil animasyon. Hepsi nasıl aynı anda hem animasyon alabilirim? Herhangi bir cevap için teşekkürler.

CEVAP
13 AĞUSTOS 2011, CUMARTESİ


Geçiş özellikleri virgül geçişleri destekleyen tüm tarayıcılarda ayrılmış

.nav a {
  -webkit-transition: color .2s, text-shadow .2s;
  /* And so on... */
}

Kolay varsayılan, bunu belirtmek zorunda değilsin. Eğer gerçekten doğrusal istiyorsanız, bunu belirtmeniz gerekir, yani -webkit-transition: color .2s linear, text-shadow .2s linear;

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Amir Parmar

    Amir Parmar

    25 Kasım 2010
  • Ben Schoon

    Ben Schoon

    23 Kasım 2012
  • Tek Syndicate

    Tek Syndicat

    23 Temmuz 2008