CSS3 margini animati

Question

Cercando di animare nei margini CSS3. Quale this site sembra dire che puoi, ma non funziona per me.

Ecco un jsFiddle: http://jsfiddle.net/ybh0thp9/3/ (Fare clic su una sezione per visualizzare l'animazione commuta).

Ecco la mia CSS:

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

Io in realtà sono 3 animazioni. 1 per una semplice iniziale fadeIn al caricamento iniziale, quindi gli altri 2 per l'animazione margin al clic. Ho anche appena provato margin invece che in alto e in basso, ma ancora nessun segno di funzionamento.

Answer 1

Non è necessario fotogrammi chiave per questo: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms; 

è necessario aggiungere la proprietà raccordo con l'elemento base che si desidera animare.

Hai anche detto che volevi cambiare l'opacità, ma non vedo come sia possibile considerando che hai un solo elemento senza figli. Voglio dire: non puoi cliccare sull'elemento se è nascosto.

Cosa si può fare, però, è aggiungere l'opacità a tutta la cosa: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

O anche più bella, con una trasformazione:

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

---

Per commenti, vuoi dissolvere gli elementi nel caricamento della pagina. Possiamo farlo aggiungendo una classe init.

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

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

---

con i fotogrammi chiave: 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

per creare animazioni strega CSS3 è necessario:

1 - Creare una classe con l'animazione atribute, a lavorare in alcuni browser è necessario inserire i prefissi: -webkit-, -o-, -moz-. 2 - Creare fotogrammi chiave di animazione

veda l'esempio:

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