SORU
2 Mayıs 2013, PERŞEMBE


Nasıl yanıp sönen/css3 ile metin yanıp sönen yapmak için?

Şu anda bu kod var:

@-webkit-keyframes blinker {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s; 
}   

Yanıp söner, ama sadece yanıp söner "tek yön", yani, sadece kaybolur, ve görünen o geri opacity: 1.0, sonra tekrar siliniyor, tekrar görünür, ve böyle devam eder... benim gibi fade out, ve sonra "Kaldır" dan bu fade tekrar opacity: 1.0. Bu mümkün mü?

CEVAP
2 Mayıs 2013, PERŞEMBE


İlk ayarı opacity: 1; ve daha son 0 başlıyor 0% ve ucunda 100% onun yerine başla 0% ve set donukluk 1, harika set opacity 0 50% ve daha tekrar set 1 100%.

Demo

.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

Burada, ben ayar animasyon süresi olmalı 1 second daha am ayar timing linear anlamına gelir olacak sürekli boyunca, ve en son benim kullanma animation-iteration-count ve hazır bu infinite anlamına gelir yükselecek. Am webkit -webkit bir önek ile aynı özellikleri arama desteği yanı sıra, Firefox'un eski sürümleri için -moz tarayıcı.


Yorum olarak, bu Internet Explorer eski sürümleri işe yaramaz, bunun için jQuery veya JavaScript kullanmak gerekir....

function blinker() {
    $('.blink_me').fadeOut(500).fadeIn(500);
}

setInterval(blinker, 1000); //Runs every second

Demo(Flaşör jQuery kullanarak)

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • 3dmmfavs

    3dmmfavs

    29 Kasım 2009
  • arnejann

    arnejann

    3 Kasım 2007
  • TheDailyTechDose

    TheDailyTech

    15 EKİM 2012