Kann ich mich bewerben, Animationen, um die Margen?

Ich versuche zu animieren, in CSS3 Ränder, die diese Website scheint zu sagen, man kann, aber ich kann Sie nicht arbeiten.

Eigentlich habe ich 3 Animationen. 1 für eine einfache erste fadeIn beim erstmaligen laden, dann die 2 anderen für die margin - animation auf Klick. Ich habe auch gerade versucht margin statt oben und unten, aber immer noch kein Zeichen, dass es funktioniert.

Klicken Sie auf einen Abschnitt, um zu sehen, animation Umschalten.

JS:

$(".section").click(function() {
    $(this).toggleClass("open");
});

CSS:

body{
    background: #f1f1f1;
}

.section{
    display: block;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
    margin: 20px 0;
}

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
</div>

Hier ein JSFiddle: http://jsfiddle.net/ybh0thp9/3/

Sie müssen zeigen alle keyframe-Animationen, wenn Sie erwarten von uns zu Debuggen, aber könntest du nicht einfach tun dies mit einem übergang - jsfiddle.net/ybh0thp9/5
Sie scheinen verwirrend, Animationen und übergänge und erscheinen, zu versuchen, zu verblassen, etwas unsichtbar zu sein, nachdem jemand auf die Sache, die Sie nicht sehen können.
oh, ja, in der Tat. Ich habe verwirren, die animation und übergang!

InformationsquelleAutor denislexic | 2015-05-14

33

Brauchen Sie nicht-keyframes für dieses: http://jsfiddle.net/BramVanroy/ybh0thp9/7/
```
transition: margin 700ms;
```
Müssen Sie die transition-Eigenschaft, um das base-element, dass Sie zu animieren.

Du hast auch erwähnt, dass Sie wollte Deckkraft zu ändern, aber ich sehe nicht, wie das möglich ist, da du nur ein einzelnes element, ohne Kinder. Ich meine: Sie können nicht klicken Sie auf das element, wenn es verborgen ist.

Was Sie allerdings tun können, ist fügen Sie die Deckkraft der ganzen Sache: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

Oder noch schöner, mit einer Verwandlung:

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);
}
```
Pro Kommentar, den Sie möchten, zu verblassen, in der die Elemente auf der Seite geladen. Wir können tun, dass durch das hinzufügen einer Klasse init.

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;
```
- Danke! Hinzugefügt habe ich wieder die animation im CSS für die es mit den keyframes (bevorzugt über jquery eine Klasse hinzufügen). Und es funktioniert! jsfiddle.net/ybh0thp9/13
- Deine Methode muss nicht - und sollte nicht - Arbeit. Ich weiß nicht, wo Sie bekam, dass der syntax, aber es funktioniert nicht in reinem CSS. Ich bearbeitet meine Antwort Ihnen zu zeigen, was die keyframes Aussehen sollte, zusammen mit ein Beispiel.
InformationsquelleAutor Bram Vanroy

Animationen erstellen, die Hexe CSS3, müssen Sie:

Erstellen Sie eine Klasse mit animation-Attribut; arbeiten in einigen Browsern müssen Sie Präfixe: -webkit-, -o-, -moz-.
Erstellen von Animations-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 }
    }

Nicht-Präfix-Regeln sollte kommen immer zuletzt. W3C-Spezifikation überschreiben sollten, browser-spezifischen Regeln.
Wirklich?!, Ich wusste nicht, dass :O
Hier ist ein gut zu Lesen.

InformationsquelleAutor ErasmoOliveira

-1

Stellen Sie sicher, dass die Einstellung nicht zwei übergänge für verschiedene Eigenschaften wie dieses:
```
transition: margin 1000ms ease-in-out;
transition: box-shadow 1000ms ease-in-out;
```
Den box-shadow animieren aber margin wird vollständig ignoriert.

Diese werden offensichtlich in Ihrem browser, debugging-tools, da wird es so Aussehen:

Dem richtigen Weg ist:
```
transition: margin 1000ms ease-in-out, box-shadow 1000ms ease-in-out;
```
- Das hat auch nicht wirklich die OP, die nicht transition Eigenschaft in Ihrem code.
- Faires Punkt, aber die Art der Ironie der akzeptierten Antwort sagt die OP zu wechseln, übergang und es wird die akzeptierte Antwort 😉
- Gut, um fair zu sein, die akzeptierte Antwort, sagt "Sie brauchen keine Animationen, nur verwenden übergänge" und dann zeigt, wie übergänge, um den Effekt zu erzielen. (es geht dann mehr ins detail zu erreichen, add-on-Anforderungen von OP) Diese Antwort setzt die Verwendung der übergänge von der get-go und nicht auf OP ' s code. Es kann mehr lohnt als ein Kommentar zu der Antwort akzeptiert oder umgeschrieben, um zu zeigen, wie zu tun, was OP will durch übergänge mit die zusätzliche Warnung, nicht zu überschreiben einer Erklärung mit anderen.
- Und mein Blick ging direkt auf den Antwort - aus dem Titel allein, und tbh ich habe nicht bemerkt, bis Sie sagten, dass die eigentliche ursprüngliche Frage nicht erwähnt übergang. Manchmal meine Antworten sind nur nützliche Dinge, die ich dachte, vielleicht hilft jemand in der Zukunft mit den gleichen dummen Fehler, den ich gerade gemacht. Manchmal bekomme ich downvoted. Manchmal habe ich nicht. Manchmal bekomme ich beleidigt und manchmal habe ich nicht.
InformationsquelleAutor Simon_Weaver

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.