होवर प्रभाव: सीएसएस एनीमेशन या वेब एनिमेशन

समस्या:
एसएमआईएल का एनिमेट टैग हटा दिया गया है, और सीएसएस होवर ट्रांज़िशन की आवश्यकता है इसे बदलने के लिए कार्यान्वित किया गया। मंडराना { स्ट्रोक-अस्पष्टता: 0.5; }

परिवर्तन पर स्केलिंग प्रभाव
समस्या:

.element_tpl:hover {
    stroke-opacity: 0.5;
}

समाधान:

निम्नलिखित विकल्पों पर विचार करें:

सीएसएस एनिमेशन:

स्केलिंग प्राप्त करने के लिए सीएसएस कीफ़्रेम का उपयोग करें:

@कीफ़्रेम स्केल-एनीमेशन { 0% {परिवर्तन: स्केल(1); } 50% {परिवर्तन: स्केल(1.12); } 100% {परिवर्तन: स्केल(1); } }

1. फिर तत्व पर एनीमेशन लागू करें:
.element_tpl { एनीमेशन: स्केल-एनीमेशन 0.5s अनंत वैकल्पिक; }

@keyframes scale-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

वेब एनिमेशन:

स्केलिंग को प्रोग्रामेटिक रूप से नियंत्रित करने के लिए वेब एनिमेशन एपीआई का उपयोग करें:

@keyframes scale-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

// एक नया एनीमेशन बनाएं स्थिरांक एनीमेशन = document.timeline.addAnimation(); // कीफ्रेम को परिभाषित करें स्थिरांक मुख्यफ़्रेम = [ {परिवर्तन: 'स्केल(1)', ऑफसेट: 0 }, {परिवर्तन: 'स्केल(1.12)', ऑफसेट: 0.5 }, {परिवर्तन: 'स्केल(1)', ऑफसेट: 1 } ]; // एनीमेशन में कीफ्रेम लागू करें एनीमेशन.प्रभाव = मुख्यफ्रेम; // तत्व को लक्षित करें एनीमेशन.लक्ष्य = document.querySelector('.element_tpl');

2. क्लिक पर स्केल ऊपर और नीचे
समस्या:

// Create a new animation
const animation = document.timeline.addAnimation();

// Define keyframes
const keyframes = [
    { transform: 'scale(1)', offset: 0 },
    { transform: 'scale(1.12)', offset: 0.5 },
    { transform: 'scale(1)', offset: 1 }
];

// Apply keyframes to the animation
animation.effect = keyframes;

// Target the element
animation.target = document.querySelector('.element_tpl');

समाधान:

सीएसएस ट्रांज़िशन:

माउसडाउन और माउसअप इवेंट पर स्केल परिवर्तन को ट्रिगर करने के लिए सीएसएस ट्रांज़िशन का उपयोग करें:

.element_tpl { संक्रमण: परिवर्तन 0.2s; } .element_tpl: सक्रिय { परिवर्तन: स्केल(1.1); }

1. वेब एनिमेशन:
क्लिक इवेंट को संभालने और तदनुसार तत्व को स्केल करने के लिए वेब एनिमेशन एपीआई का उपयोग करें:

@keyframes scale-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

// जोड़ें घटना श्रोता document.querySelector('.element_tpl').addEventListener('click', (event) => { // एक नया एनिमेशन बनाएं स्थिरांक एनीमेशन = document.timeline.addAnimation(); // कीफ्रेम को परिभाषित करें स्थिरांक मुख्यफ़्रेम = [ {परिवर्तन: 'स्केल(1)', ऑफसेट: 0 }, { परिवर्तन: 'स्केल(1.1)', ऑफसेट: 0.2 }, { परिवर्तन: 'स्केल(1)', ऑफसेट: 0.4 }, ]; // एनीमेशन में कीफ्रेम लागू करें एनीमेशन.प्रभाव = मुख्यफ्रेम; // तत्व को लक्षित करें एनीमेशन.लक्ष्य = घटना.लक्ष्य; });

2. SMIL एनिमेशन सहेजा जा रहा है
समस्या:

// Add event listener
document.querySelector('.element_tpl').addEventListener('click', (event) => {

    // Create a new animation
    const animation = document.timeline.addAnimation();

    // Define keyframes
    const keyframes = [
        { transform: 'scale(1)', offset: 0 },
        { transform: 'scale(1.1)', offset: 0.2 },
        { transform: 'scale(1)', offset: 0.4 },
    ];

    // Apply keyframes to the animation
    animation.effect = keyframes;

    // Target the element
    animation.target = event.target;
});

समाधान:

एरिक विलिगर्स द्वारा निर्मित SMIL पॉलीफ़िल का उपयोग करें: https://github.com/ericwilligers/svg-animation। यह पॉलीफ़िल SMIL एनिमेशन को वेब एनिमेशन में परिवर्तित करता है, उन्हें लागू करने का एक वैकल्पिक तरीका प्रदान करता है।