CSS3 animierte Ränder

Question

Versuch, in CSS3 Margen zu animieren. Welche this site scheint zu sagen, dass Sie können, aber es funktioniert nicht für mich.

Hier ist ein jsFiddle: http://jsfiddle.net/ybh0thp9/3/ (Klicken Sie auf einen Abschnitt, um die Animation anzuzeigen).

Hier ist meine CSS:

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

Ich habe eigentlich drei Animationen. 1 für eine einfache erste fadeIn beim ersten Laden, dann die anderen 2 für die margin Animation auf klicken. Ich habe auch gerade versucht margin anstelle von oben und unten, aber immer noch kein Zeichen dafür, dass es funktioniert.

Answer 1

Sie brauchen keine Keyframes für diese: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms; 

Sie müssen den Übergang Eigenschaft mit dem Basiselement hinzufügen, die Sie animieren möchten.

Sie erwähnten auch, dass Sie die Deckkraft ändern wollten, aber ich sehe nicht, wie das möglich ist, wenn Sie nur ein einzelnes Element ohne Kinder haben. Ich meine: Sie können nicht auf das Element klicken, wenn es ausgeblendet ist.

Was Sie tun können, obwohl, fügen Sie ist Undurchsichtigkeit zu der ganzen Sache: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

Oder noch schöner, mit einer Transformation:

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 Kommentar, Sie möchten die Elemente beim Laden der Seite einblenden. Wir können das tun, indem wir eine Klasse init hinzufügen.

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

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

---

Mit Keyframes: 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

Animationen Hexe CSS3 erstellen müssen Sie:

1 - Erstellen Sie eine Klasse mit Animation atribute, arbeiten In einigen Browsern müssen Sie Präfixe einfügen: -webkit-, -o-, -moz-. 2 - Erstellen Animation Keyframes

siehe Beispiel:

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