Get best of the week

Actualiza tus animaciones CSS


En el proceso de estudiar las animaciones CSS, generalmente analizamos la sintaxis, decimos algo sobre los fotogramas clave, sobre la transición, sobre las propiedades asociadas con ellos, sobre cómo activarlos cuando se pasa el mouse o se cuelgan las clases. Y a menudo todo termina ahí. Y así, después de hacer un par de botones que cambian de color o dejar notificaciones, las personas creen que saben todo sobre las animaciones CSS. ¿Pero es?


Claro que no. Las principales dificultades comienzan cuando se trata de algo más complicado que cambiar el color o la transparencia del elemento, luego cuando nos encontramos con un diseñador con amplios puntos de vista que presenta todo tipo de cosas diferentes, sin preocuparse realmente por cómo inventarlas más tarde. . Y aquí, muchos frontales comienzan a tropezar. Mis observaciones muestran que los desarrolladores, y no solo los principiantes, carecen de una amplia gama de puntos de vista, carecen de algunas ideas audaces que rompen el orden familiar de los elementos en una página para implementar algo más o menos complicado. Y me parece que hay que hacer algo con esto. En este sentido, hoy veremos algunos ejemplos de animaciones CSS con CodePen, que pueden convertirse en desencadenantes que lo hacen pensar en la amplitud de posibilidades de herramientas aparentemente simples,y danos algunos consejos sobre lo que debes intentar hacer mientras aprendes esta clase de animaciones. Espero que esto ayude a alguien a echar un vistazo a las animaciones CSS desde un nuevo ángulo y aumentar un poco sus habilidades en su uso.


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



!


Al trabajar con animaciones CSS, es importante experimentar, hacer cosas raras y ver qué sucede. Tantas cosas que "no se pueden inventar" en realidad se pueden inventar y animar, lo principal es no tener miedo. Para cualquiera que esté comenzando a desarrollarse en esta dirección, recomiendo jugar con al menos los trucos enumerados en este artículo. Esto lo llevará a un nuevo nivel al trabajar con animaciones.


Si tiene sus propias ideas con respecto a los enfoques de las animaciones CSS, algunos trucos que a menudo se usan o pueden ayudar a otras personas a mirar las animaciones desde un nuevo ángulo, no dude en agregarlas en los comentarios y adjuntar un ejemplo con CodePen o JSFiddle. Será útil para todos.

More articles:


All Articles