Get best of the week

Tingkatkan animasi CSS Anda


Dalam proses mempelajari animasi CSS, kami biasanya mem-parsing sintaksis, mengatakan sesuatu tentang kerangka kunci, tentang transisi, tentang properti yang terkait dengannya, tentang cara mengaktifkannya saat Anda mengarahkan kursor ke mouse atau dengan menggantung kelas. Dan seringkali semuanya berakhir di sana. Jadi, setelah membuat beberapa tombol pengubah warna atau meninggalkan notifikasi, orang percaya bahwa mereka tahu segalanya tentang animasi CSS. Tetapi apakah itu?


Tentu tidak. Kesulitan utama dimulai ketika datang ke sesuatu yang lebih rumit daripada mengubah warna atau transparansi elemen, kemudian ketika kita menemukan seorang desainer dengan pandangan luas yang muncul dengan segala macam hal yang berbeda, tidak benar-benar peduli tentang bagaimana membuat mereka nanti . Dan di sini, banyak ujung depan mulai tersandung. Pengamatan saya menunjukkan bahwa pengembang, dan tidak hanya pemula, tidak memiliki banyak pandangan, tidak memiliki beberapa ide berani yang memecah urutan elemen yang akrab pada halaman untuk mengimplementasikan sesuatu yang lebih atau kurang rumit. Dan bagi saya sepertinya ada sesuatu yang harus dilakukan dengan ini. Dalam hal ini, hari ini kita akan melihat beberapa contoh animasi CSS dengan CodePen, yang dapat menjadi pemicu yang membuat Anda berpikir tentang luasnya kemungkinan alat sederhana yang tampaknya,dan berikan diri kita beberapa tips tentang apa yang harus Anda coba lakukan saat mempelajari kelas animasi ini. Saya harap ini membantu seseorang untuk melihat animasi CSS dari sudut pandang baru dan sedikit meningkatkan keterampilan mereka dalam penggunaannya.


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



!


Saat bekerja dengan animasi CSS, penting untuk bereksperimen, melakukan hal-hal aneh, dan melihat apa yang terjadi. Begitu banyak hal yang "tidak bisa dibuat-buat" sebenarnya bisa dibuat-buat dan dianimasikan, yang utama adalah jangan takut. Bagi siapa saja yang baru mulai berkembang ke arah ini, saya sarankan bermain dengan setidaknya trik yang tercantum dalam artikel ini. Ini akan membawa Anda ke tingkat yang baru dalam bekerja dengan animasi.


Jika Anda memiliki ide sendiri mengenai pendekatan animasi CSS, beberapa trik yang sering digunakan atau dapat membantu orang lain melihat animasi dari sudut pandang baru, silakan menambahkannya di komentar dan melampirkan contoh dengan CodePen atau JSFiddle. Ini akan bermanfaat bagi semua orang.

More articles:


All Articles