CSS एनीमेशन प्रदर्शन विश्लेषण

सामान्य जानकारी

• एक संपत्ति position, जो विशेष रूप से, मान ले सकती है absoluteऔर relative।
• संपत्ति transform।
• संपत्ति opacity।
• गुण left, right, top, bottom।

#animate {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;

    animation: move 3s ease infinite;
}

@keyframes move {
    50% {
        top: 200px;
        left: 130px;
    }
}

#animate {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;

    animation: move 3s ease infinite;
}

@keyframes move {
    50% {
        transform: translate(100px, 100px);
    }
}

ब्राउज़र पृष्ठ को कैसे प्रदर्शित करता है?

1. Recalculate Style - तत्वों पर लागू होने वाली शैलियों की गणना।
2. Layout - पेज पर तत्वों के लेआउट और उनके प्लेसमेंट का निर्माण।
3. Paint- बनाई गई परतों के पिक्सल को भरना, वह है - प्रत्येक परत के लिए रेखापुंज छवियां बनाना। जीपीयू इन चित्रों का उपयोग पृष्ठ प्रदर्शित करने के लिए करेगा।
4. Composite Layer- लेआउट की परतें और उन्हें स्क्रीन पर प्रदर्शित करें। परिणाम समाप्त पृष्ठ होगा।

एनिमेशन और जी.पी.यू.

सारांश