yük css3 geçiş animasyon?

Javascript kullanmadan sayfa yük üzerinde CSS3 geçiş animasyon kullanmak mümkün mü?

Bu ne istiyorum, ama sayfa yükleme:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

Şimdiye kadar ne buldum

CSS3 transition-delay, unsurları üzerinde etkileri geciktirmek için. Hover üzerinde çalışır sadece.
* *8, yük üzerinde çalışıyor ama son derece yavaş. Kullanışlı değil bu yüzden.
CSS3 transition yeterince hızlı ama sayfa yüklendiğinde animasyon yok.

CEVAP

28 EYLÜL 2012, Cuma

Diğer cevaplar burada aykırıolabilirbir çalıştırınCSSherhangi bir JavaScript kullanmadan sayfa yükleme animasyonu; sadece kullanmak zorundaCSS3 Kareleri.

İşte bir navigasyon menüsü ile içine sürgülü bir gösteriCSS3sadece:DEMO

İşte kod:

header {
    background: #000;
    color: #fff;
    height: 20px;
    position: relative;
    padding: 10px;

    -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.3s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.3s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;
}
header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
header ul li{
    display: inline-block;
    margin-right: 20px
}
@-moz-keyframes dropHeader {
    0% {
        -moz-transform: translateY(-40px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropHeader {
    0% {
        -webkit-transform: translateY(-40px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes dropHeader {
    0% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0);
    }
}


/* Added for aesthetics */

body {
    margin: 0; 
    font: normal 14px "Segoe UI", Arial, Helvetica, Sans Serif;
}
a {
     color: #eee;
     text-decoration: none;
}

<header>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</header>

İlginç şeyler her türlü, İçerik sürgülü veya alanlar dikkat çekmek gibi yapabilirsiniz.

Burada W3C şunları söyler: http://www.w3.org/TR/css3-animations/#keyframes

Bunu Paylaş: