Get best of the week

Améliorez vos animations CSS


Dans le processus d'étude des animations CSS, nous analysons généralement la syntaxe, disons quelque chose sur les images clés, sur la transition, sur les propriétés qui leur sont associées, sur la façon de les activer lorsque vous survolez la souris ou en suspendant des classes. Et souvent, tout s'arrête là. Et donc, après avoir fait quelques boutons qui changent de couleur ou laisser des notifications, les gens croient qu'ils savent tout sur les animations CSS. Mais est-ce?


Bien sûr que non. Les principales difficultés commencent quand il s'agit de quelque chose de plus délicat que de changer la couleur ou la transparence de l'élément, puis quand nous rencontrons un designer avec des vues larges qui propose toutes sortes de choses différentes, sans vraiment se soucier de la façon de les fabriquer plus tard . Et ici, de nombreux front-ends commencent à trébucher. Mes observations montrent que les développeurs, et pas seulement les débutants, manquent de vues, manquent d'idées audacieuses qui cassent l'ordre familier des éléments sur une page afin d'implémenter quelque chose de plus ou moins compliqué. Et il me semble que quelque chose doit être fait avec cela. À cet égard, nous allons aujourd'hui examiner quelques exemples d'animations CSS avec CodePen, qui peuvent devenir des déclencheurs qui vous font réfléchir à l'étendue des possibilités d'outils apparemment simples,et donnez-nous quelques conseils sur ce que vous devriez essayer de faire tout en apprenant cette classe d'animations. J'espère que cela aide quelqu'un à jeter un œil aux animations CSS sous un nouvel angle et à améliorer un peu leurs compétences dans leur utilisation.


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



!


Lorsque vous travaillez avec des animations CSS, il est important d'expérimenter, de faire des choses étranges et de voir ce qui se passe. Tant de choses qui «ne peuvent pas être inventées» peuvent en fait être inventées et animées, l'essentiel est de ne pas avoir peur. Pour tous ceux qui commencent tout juste à se développer dans cette direction, je recommande de jouer avec au moins les astuces répertoriées dans cet article. Cela vous amènera à un nouveau niveau dans le travail avec les animations.


Si vous avez vos propres idées concernant les approches des animations CSS, certaines astuces qui sont souvent utilisées ou peuvent aider d'autres personnes à regarder les animations sous un nouvel angle, n'hésitez pas à les ajouter dans les commentaires et à joindre un exemple avec CodePen ou JSFiddle. Ce sera utile à tout le monde.

More articles:


All Articles