Aktualisieren Sie Ihre CSS-Animationen

Während des Studiums von CSS-Animationen analysieren wir normalerweise die Syntax, sagen etwas über Keyframes, über den Übergang, über die damit verbundenen Eigenschaften, darüber, wie sie aktiviert werden, wenn Sie mit der Maus über die Maus fahren oder Klassen hängen. Und oft endet alles dort. Nachdem sie einige Schaltflächen zum Ändern der Farbe erstellt oder Benachrichtigungen hinterlassen haben, glauben die Leute, dass sie alles über CSS-Animationen wissen. Aber ist es?

Natürlich nicht. Die Hauptschwierigkeiten beginnen, wenn es um etwas Schwierigeres geht, als die Farbe oder Transparenz des Elements zu ändern, und wenn wir dann auf einen Designer mit weiten Ansichten stoßen, der sich alle möglichen Dinge einfallen lässt und sich nicht wirklich darum kümmert, wie man sie später zusammensetzt . Und hier beginnen viele Frontends zu stolpern. Meine Beobachtungen zeigen, dass Entwicklern und nicht nur Anfängern eine Vielzahl von Ansichten und mutigen Ideen fehlen, die die vertraute Reihenfolge der Elemente auf einer Seite brechen, um etwas mehr oder weniger Kompliziertes zu implementieren. Und es scheint mir, dass damit etwas getan werden muss. In diesem Zusammenhang werden wir uns heute einige Beispiele für CSS-Animationen mit CodePen ansehen, die zu Auslösern werden können, die Sie über die Breite der Möglichkeiten einfacher scheinbarer Werkzeuge nachdenken lassen.und geben Sie uns einige Tipps, was Sie beim Erlernen dieser Animationsklasse versuchen sollten. Ich hoffe, dies hilft jemandem, CSS-Animationen aus einem neuen Blickwinkel zu betrachten und seine Fähigkeiten in der Verwendung ein wenig zu verbessern.

CodePen, , , . , , , , .

:

keyframes

, , , . , , . – , . , - , .

– visibility “”, . , “ ”.

keyframes . , , -, IE/Edge, - . Safari . . , , .

, , , , . , , , - , .

, . z-index:

@keyframes example-animation {
    0% {
        z-index: 1;
    }
    49% {
        z-index: 1;
    }
    50% {
        z-index: -1;
    }
    100% {
        z-index: -1;
    }
}

1% . , – , , – 1% . , .

, . , , CSS – , , . – .

:

, . z-index .

, , , , - - , , .

- , – , . , , .

-

. . . . “12 ” , . ?

, CSS , , . . ( ) .

- :

.example {
    animation: example-animation 1s linear infinite;
}

.example:after {
    animation: example-animation 1s linear infinite
    animation-delay: 50ms;
}

, . . , . .

:

SVG , … , . – .

animation-timing-function

– , animation-timing-function . , .

keyframes , – ... , , – .

:

@keyframes example-animation {
    0% {
        /* . . . */
        animation-timing-function: ease-in;
    }
    25% {
        /* . . . */
        animation-timing-function: ease-out;
    }
    50% {
        /* . . . */
        animation-timing-function: ease-in;
    }
    75% {
        /* . . . */
        animation-timing-function: ease-out;
    }
    100% {
        /* . . . */
    }
}

? , , , . , - , , . .

, , David Lewis ( , ):

. – , . .

–

, . - .

, , . – , , , , – .

- :

<div class='layer -bottom'>content</div>
<div class='layer -middle'>content</div>
<div class='layer -top'>content</div>

:

.layer {
    position: absolute;
    top: 0;
    left: 0;
}

.layer.-top {
    animation: first-animation 1s linear infinite;
}

.layer.-bottom {
    animation: second-animation 1s linear infinite;
}

, -, :

, .

, content:attr(), HTML.

, , , . , . , , , . . , , .

.example:nth-of-type(1) {
    animation-duration: 0.9s;
}

.example:nth-of-type(2) {
    animation-duration: 1.0s;
}

.example:nth-of-type(3) {
    animation-duration: 1.1s;
}

? – .

, – , , , .

, , - , keyframes , . animation-timing-function. , – . . .

z-index

, , - z-index. (-1, 1). , - span-, , - .

CSS - :

.example:nth-of-type(1) {
    z-index: 1;
}

.example:nth-of-type(2) {
    z-index: 1;
}

.example:nth-of-type(3) {
    z-index: -1;
}

.example:nth-of-type(4) {
    z-index: 1;
}

.example:nth-of-type(5) {
    z-index: -1;
}

, , .

, Ana Tudor:

CSS-, z-index . , . .

“”

, SVG- HTML- – IE/Edge , , , Firefox, . , Edge , . , , , , .

:

.example {
    filter: url('#my-super-gooey-filter');
}

SVG :

<svg>
    <defs>
        <filter id='goo'>
            <feGaussianBlur in='SourceGraphic' stdDeviation='8' result='blur' />
            <feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0
                                                           0 1 0 0 0 
                                                           0 0 1 0 0
                                                           0 0 0 18 -7' result='goo' />
            <feBlend in='SourceGraphic' in2='goo' />
        </filter>
    </defs>
</svg>

SVG- – , , , .

:

"-" . .

, SVG , , HTML , , . – , .

CSS

, - … , , , , , , SPA, . , .

- ( , ) “” “”. , – , HTML CSS, JS, – , JS, . - , , - , , – , - – , . WebGL, , .

- . , , CSS-, , , .

, , , . , .

, CSS, CSS . , , . , , , – . - CSS- , . “ , ” , . . , , . - CSS . , .

!

Bei der Arbeit mit CSS-Animationen ist es wichtig zu experimentieren, seltsame Dinge zu tun und zu sehen, was passiert. So viele Dinge, die „nicht erfunden werden können“, können tatsächlich erfunden und animiert werden. Die Hauptsache ist, keine Angst zu haben. Für alle, die gerade erst anfangen, sich in diese Richtung zu entwickeln, empfehle ich, mindestens mit den in diesem Artikel aufgeführten Tricks zu spielen. Dies bringt Sie auf eine neue Ebene in der Arbeit mit Animationen.

Wenn Sie eigene Ideen zu Ansätzen für CSS-Animationen haben, einige Tricks, die häufig verwendet werden oder anderen Menschen helfen können, Animationen aus einem neuen Blickwinkel zu betrachten, können Sie sie in den Kommentaren hinzufügen und ein Beispiel mit CodePen oder JSFiddle anhängen. Es wird für alle nützlich sein.