CSS / JavaScript Animation?

[mark]

könnt ihr mir vielleicht sagen, wie die Animation auf der Seite http://sportlaune.de/ im Bereich ** Sport macht Laune, finde es selber heraus! ** umgesetzt wurde?

mit Css Transitions.

Ich weiß nicht, wie gut du mit Entwicklerwerkzeugen deines Browsers umgehen kannst, aber, wenn du die Entwicklerwerkzeuge deines Browsers öffnest und auf "div.info-box info-box_type_boxed-2" ein Hover setzt siehst du, wie sich die entsprechenden Eigenschaften der span.info-box__desc Elemente ändern.

Kernstück der Punkte Animation ist folgende Zeile:

transition: all .1s ease .5s; 

Erklärung: all - alle css Eigenschaften werden animiert .1s - Dauer der Animation = 0.1 Sekunden ease - Geschwindigkeitskurve der Animation .5s - Zeitverzögerung mit der die Animation startet

Du siehst anhand des letzten Parameters der transition Eigenschaft, dass alle Punkte gestaffelt starten:

Transition der Punkte: first: transition: all .1s ease; second: transition: all .1s ease .05s; third: transition: all .1s ease .1s;

Nun gilt es noch zu klären welche Eigenschaften animiert werden, bzw. was sich hinter dem Wert ALL verbirgt. Dazu vergleiche ich die CSS EIgenschaften eines Punktes mit und ohne Hover. Im Nachfolgenden am Beispiel des Ersten Punktes (Browserprefixes hab ich weckgelassen):

Ohne Hover auf div.info-box info-box_type_boxed-2

.info-box_type_boxed-2 .info-box__desc-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #b4b4b4;
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px;
    opacity: 1;
    transition: all .1s ease .3s;
}

Mit Hover auf div.info-box info-box_type_boxed-2

.info-box_type_boxed-2:hover .info-box__desc-dot {
    opacity: 0;
}

.info-box_type_boxed-2:hover .info-box__desc-dot_first {
    transition: all .1s ease;
}

Du siehst: er ändert die opacity- und die transition- Eigenschaft.

• Durch opacity:0 werden die Elemente ausgeblendet.
• Durch die Änderung der Transition erreicht der Autor, dass zwar alle Punkte unterschiedlich (zeitverzögert) ausgeblendet werden, jedoch beim Einblenden alle gleichzeitig zu sehen sind.

Dann zum Text der eingeblendet wird. Das p-Element. Auch hier die selbe vorgehensweise: Man vergleicht die CSS-Eigenschaften vor und nach dem Hovern.

Vor dem Hover:

.info-box_type_boxed-2 .info-box__desc p {
    font-size: 13px;
    line-height: 18px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease,
                opacity .5s ease;
} 

Nach dem Hover:

.info-box_type_boxed-2:hover .info-box__desc p {
    max-height: 70px;
    opacity: 1;
    transition: max-height .7s ease .15s,
                opacity .8s linear .2s;
}

Durch opacity und die max-height wird das Element eingeblendet. Durch den letzten Parameter der transition Eigenschaft (.15s und .2s) passiert das Einblenden des Textes erst nachdem die Punkte ausgeblendet wurden.

Normalerweise würde sich der eingeblendete Text nun nach unten öffnen. Dass sich die Elemente der innerhalb der Box (icon, Überschrift, Text) immer zentrieren erreicht der autor durch ein recht unschönes display: table-cell; vertical-align: middle; auf dem div.info-box__inner - Element.

ZAG FEDDISCH ist die CSS Animation. Ich hoffe du kannst damit was anfangen.

Was du bei deiner Umsetzung besser machen kannst als der Autor:

• benutze nicht transition: all, sondern explizite Angaben, was du animieren möchtest. Das macht es leichter für andere deinen Code zu lesen und hilft u.U. dabei Fehler zu finden.
• Wenn du schon CSS3 verwenden kannst benutze für die vertikale Zentrierung in diesem Fall nicht table-cell, sondern transforms.
• schau dir nicht das Markup (HTML) ab. Das ist wahrscheinlich autogeneriert von irgendeinem Wordpress Page-Builder und hat eigentlich nur seine Berechtigung, dadurch, dass man es billig kaufen kann.