Get best of the week

Upgrade your CSS animations


In the process of studying CSS animations, we usually parse the syntax, say something about keyframes, about transition, about the properties associated with them, about how to activate them when you hover over the mouse or by hanging classes. And often it all ends there. And so, having made a couple of color-changing buttons or leaving notifications, people believe that they know everything about CSS animations. But is it?


Of course no. The main difficulties begin when it comes to something more tricky than changing the color or transparency of the element, then when we come across a designer with broad views who comes up with all sorts of different things, not really caring about how to make them up later . And here, many front-ends begin to stumble. My observations show that developers, and not only beginners, lack a breadth of views, lack some bold ideas that break the familiar order of elements on a page in order to implement something more or less complicated. And it seems to me that something needs to be done with this. In this regard, today we will look at some examples of CSS animations with CodePen, which can become triggers that make you think about the breadth of possibilities of simple seemingly tools,and give ourselves some tips on what you should try to do while learning this class of animations. I hope this helps someone to take a look at CSS animations from a new angle and a little boost their skills in their use.


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



!


When working with CSS animations, it’s important to experiment, do weird things, and see what happens. So many things that “cannot be made up” can actually be made up and animated, the main thing is not to be afraid. For anyone who is just starting to develop in this direction, I recommend playing with at least the tricks listed in this article. This will take you to a new level in working with animations.


If you have your own ideas regarding approaches to CSS animations, some tricks that are often used or can help other people look at animations from a new angle, then feel free to add them in the comments and attach an example with CodePen or JSFiddle. It will be useful to everyone.

More articles:


All Articles