CSS3 animasyon kenar boşlukları

Question

CSS3 kenar boşluklarında animasyon yapmaya çalışılıyor. Hangi this site göründüğünü söyleyebilir, ama benim için çalışmıyor.

İşte jsFiddle: http://jsfiddle.net/ybh0thp9/3/ (Animasyon geçişini görmek için bir bölüme tıklayın). Aslında 3 animasyonlar var

.section{ 
    display: block; 
    animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease; 
} 
.section.open { 
      margin: 20px 0; 
} 

:

İşte benim CSS olduğunu. İlk yükte basit bir başlangıç ​​fadeIn için 1, daha sonra margin animasyon için diğer 2 tıklama. Ayrıca sadece üst ve alt yerine margin denedim ama yine de çalışmanın bir işareti.

Answer 1

Bunun için ana kareleri gerekmez: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms; 

Sen Canlandırmak istediğiniz taban elemanına geçiş özelliği eklemeniz gerekir.

Ayrıca, opaklık değişimini istediğinizi de belirttiniz, ancak çocuksuz tek bir elemente sahip olduğunuzu düşünerek bunun nasıl mümkün olduğunu görmüyorum. Demek istediğim: eğer gizlenmişse öğeye tıklayamazsın. yani dönüşümlü, http://jsfiddle.net/BramVanroy/ybh0thp9/9/

Veya bile güzel:

Ne yapabilirsiniz

olsa da, her şey şeffaflık ekleyin Başına yorum

http://jsfiddle.net/BramVanroy/ybh0thp9/10/

.section { 
    margin: 0; 
    opacity: 0.7; 
    transform: scale(0.85); 
    transition: all 700ms; 
} 
.section.open { 
    margin: 20px 0; 
    opacity: 1; 
    transform: scale(1); 
} 

---

, sayfa yükündeki elemanlarda kaybolmak istersiniz. Bunu, init sınıfını ekleyerek yapabiliriz. ana kareler ile

http://jsfiddle.net/BramVanroy/ybh0thp9/12/

$(".section").addClass("init"); // JS 
.section.init {opacity: 1;} // CSS 

---

: http://jsfiddle.net/BramVanroy/ybh0thp9/14/

@-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } } 
@-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } } 
@keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } } 

-webkit-animation: fadeIn 1.5s ease;  
-moz-animation: fadeIn 1.5s ease; 
animation: fadeIn 1.5s ease; 

Answer 2

animasyonlar cadı CSS3 oluşturmak için yapmanız gerekenler:

1 - animasyon özniteliğinde sahip bir sınıf oluşturma çalışması bazı tarayıcılarda önekleri koymanız gerekir: -webkit-, -o-, -moz-. Sen ** Tüm ** kare animasyonlar bize bunları hata ayıklama ama sadece bir geçiş ile bu yapamadı bekliyorsanız göstermek gerekir

.animate{ 
    animation: myAnimation 10s; 
    animation-direction: alternate; 
    animation-play-state: running; 
    animation-iteration-count: infinite; 
    animation-delay: 0; 
    animation-timing-function: 1; 
    animation-direction: alternate; 

    -webkit-animation: myAnimation 10s; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-play-state: running; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-delay: 0; 
    -webkit-animation-timing-function: 1; 
    -webkit-animation-direction: alternate; 

    -moz-animation: myAnimation 10s; 
    -moz-animation-direction: alternate; 
    -moz-animation-play-state: running; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-delay: 0; 
    -moz-animation-timing-function: 1; 
    -moz-animation-direction: alternate; 

    -o-animation: myAnimation 10s; 
    -o-animation-direction: alternate; 
    -o-animation-play-state: running; 
    -o-animation-iteration-count: infinite; 
    -o-animation-delay: 0; 
    -o-animation-timing-function: 1; 
    -o-animation-direction: alternate; 
} 

    @keyframes myAnimation { 
     0%  { margin-top: 0; margin-left: 50px} 
     25%  { margin-top: 100px; margin-left: 50px } 
     50%  { margin-top: 0; margin-left: 50px } 
     75%  { margin-top: 100px; margin-left: 50px } 
     100% { margin-top: 0; margin-left: 50px } 
    } 
    @-webkit-keyframes myAnimation { 
     0%  { margin-top: 0; margin-left: 100px} 
     25%  { margin-top: 100px; margin-left: 100px } 
     50%  { margin-top: 0; margin-left: 100px } 
     75%  { margin-top: 100px; margin-left: 100px } 
     100% { margin-top: 0; margin-left: 100px } 
    } 
    @-moz-keyframes myAnimation { 
     0%  { margin-top: 0; margin-left: 100px} 
     25%  { margin-top: 100px; margin-left: 100px } 
     50%  { margin-top: 0; margin-left: 100px } 
     75%  { margin-top: 100px; margin-left: 100px } 
     100% { margin-top: 0; margin-left: 100px } 
    } 
    @-o-keyframes myAnimation { 
     0%  { margin-top: 0; margin-left: 100px} 
     25%  { margin-top: 100px; margin-left: 100px } 
     50%  { margin-top: 0; margin-left: 100px } 
     75%  { margin-top: 100px; margin-left: 100px } 
     100% { margin-top: 0; margin-left: 100px } 
    }