ترقية الرسوم المتحركة الخاصة بك CSS

في عملية دراسة الرسوم المتحركة لـ CSS ، نقوم عادةً بتحليل بناء الجملة ، ونقول شيئًا عن الإطارات الرئيسية ، وعن الانتقال ، وعن الخصائص المرتبطة بها ، وعن كيفية تنشيطها عند التمرير فوق الماوس أو عن طريق تعليق الفصول الدراسية. وغالبا ما ينتهي كل شيء عند هذا الحد. وهكذا ، بعد عمل زرين لتغيير اللون أو ترك إشعارات ، يعتقد الناس أنهم يعرفون كل شيء عن الرسوم المتحركة CSS. لكن هل هي كذلك؟

بالطبع لا. تبدأ الصعوبات الرئيسية عندما يتعلق الأمر بشيء أكثر صعوبة من تغيير لون العنصر أو شفافيته ، ثم عندما نلتقي بمصمم يتمتع بوجهات نظر واسعة يأتي بكل أنواع الأشياء المختلفة ، ولا يهتم حقًا بكيفية صنعها لاحقًا . وهنا ، تبدأ العديد من الواجهات الأمامية بالتعثر. توضح ملاحظاتي أن المطورين ، وليس المبتدئين فقط ، يفتقرون إلى اتساع المشاهدات ، ويفتقرون إلى بعض الأفكار الجريئة التي تكسر الترتيب المألوف للعناصر على الصفحة من أجل تنفيذ شيء أكثر أو أقل تعقيدًا. ويبدو لي أنه يجب فعل شيء بهذا. في هذا الصدد ، سنلقي نظرة اليوم على بعض أمثلة الرسوم المتحركة لـ CSS باستخدام CodePen ، والتي يمكن أن تصبح محفزات تجعلك تفكر في اتساع إمكانيات الأدوات البسيطة التي تبدو ،وإعطاء أنفسنا بعض النصائح حول ما يجب أن تحاول القيام به أثناء تعلم هذه الفئة من الرسوم المتحركة. آمل أن يساعد هذا شخصًا على إلقاء نظرة على الرسوم المتحركة لـ CSS من زاوية جديدة وتعزيز مهاراتهم في استخدامهم قليلاً.

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

!

عند العمل مع الرسوم المتحركة CSS ، من المهم أن تجرب ، وتفعل أشياء غريبة ، وترى ما يحدث. الكثير من الأشياء "التي لا يمكن أن تتكون" يمكن أن تكون في الواقع متحركة وأن تكون متحركة ، الشيء الرئيسي هو عدم الخوف. بالنسبة لأي شخص بدأ للتو في التطور في هذا الاتجاه ، أوصي باللعب على الأقل مع الحيل المدرجة في هذه المقالة. سينقلك هذا إلى مستوى جديد في العمل مع الرسوم المتحركة.

إذا كانت لديك أفكارك الخاصة فيما يتعلق بمناهج الرسوم المتحركة لـ CSS ، فإن بعض الحيل التي غالبًا ما تستخدم أو يمكن أن تساعد الآخرين في النظر إلى الرسوم المتحركة من زاوية جديدة ، فلا تتردد في إضافتها في التعليقات وإرفاق مثال مع CodePen أو JSFiddle. سيكون مفيدا للجميع.