अपने सीएसएस एनिमेशन को अपग्रेड करें

सीएसएस एनिमेशन का अध्ययन करने की प्रक्रिया में, हम आमतौर पर वाक्य रचना को पार्स करते हैं, कीफ्रेम के बारे में कुछ कहते हैं, संक्रमण के बारे में, उनसे जुड़े गुणों के बारे में, जब आप माउस के ऊपर या हैंगिंग क्लासेस से उन्हें कैसे सक्रिय करते हैं। और अक्सर यह सब वहाँ समाप्त होता है। और इसलिए, कुछ रंग बदलने वाले बटन बनाने या सूचनाएं छोड़ने के बाद, लोगों का मानना ​​है कि वे सीएसएस एनिमेशन के बारे में सब कुछ जानते हैं। पर है क्या?

बेशक नहीं। मुख्य कठिनाइयाँ तब शुरू होती हैं जब यह तत्व के रंग या पारदर्शिता को बदलने की तुलना में कुछ अधिक मुश्किल हो जाता है, तब जब हम एक डिजाइनर के पास व्यापक विचार रखते हैं जो सभी प्रकार की विभिन्न चीजों के साथ आते हैं, वास्तव में इस बात की परवाह नहीं करते कि उन्हें बाद में कैसे बनाया जाए। । और इधर, कई सामने के छोर ठोकर शुरू हो जाते हैं। मेरी टिप्पणियों से पता चलता है कि डेवलपर्स, और न केवल शुरुआती, विचारों की चौड़ाई में कमी, कुछ बोल्ड विचारों का अभाव है जो किसी पृष्ठ पर तत्वों के परिचित क्रम को तोड़ने के लिए कुछ अधिक या कम जटिल लागू करते हैं। और मुझे लगता है कि इसके साथ कुछ करने की जरूरत है। इस संबंध में, आज हम कोडपैन के साथ सीएसएस-एनिमेशन के कुछ उदाहरणों को देखेंगे, जो ट्रिगर बन सकते हैं जो आपको सरल प्रतीत होने वाले साधनों की संभावनाओं की चौड़ाई के बारे में सोचते हैं,और एनिमेशन के इस वर्ग को सीखने के दौरान आपको क्या करने की कोशिश करनी चाहिए, इसके बारे में खुद को कुछ सुझाव दें। मुझे उम्मीद है कि यह सीएसएस एनिमेशन को नए कोण से देखने और उनके उपयोग में अपने कौशल को थोड़ा बढ़ावा देने में किसी की मदद करता है।

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 एनिमेशन के दृष्टिकोण के बारे में अपने स्वयं के विचार हैं, तो कुछ ट्रिक्स जो अक्सर उपयोग की जाती हैं या अन्य लोगों को नए कोण से एनिमेशन देखने में मदद कर सकती हैं, तो उन्हें टिप्पणियों में जोड़ने के लिए स्वतंत्र महसूस करें और CodePen या JSFiddle के साथ एक उदाहरण संलग्न करें। यह सभी के लिए उपयोगी होगा।