CSS3 एनीमेशन: ब्लिंकिंग ओवरले बॉक्स

Question

मैं एक तत्व बनाना चाहता हूं जो स्थिति का उपयोग कर किसी पृष्ठ का एक हिस्सा ओवरले करता है: पूर्ण। यह तत्व लाल और पारदर्शी के बीच 50% अपारदर्शी और झपकी होगी। एक संवाद के डिफ़ॉल्ट बटन के लिए ओएसएक्स (प्रयुक्त?) का उपयोग करने के लिए थोड़ा सा उपयोग करता है।

CSS3 के साथ एक अनंत एनीमेशन पाश कैसे बनाएं?

इस लूप में दो पृष्ठभूमि रंगों के बीच चक्र कैसे करें?

CSS3 एनीमेशन के माध्यम से आज कौन सा ब्राउज़र संभव समर्थन है?

jQuery एनीमेशन एक विकल्प है, लेकिन मैं पहले CSS3 दृष्टिकोण का प्रयास करना चाहता हूं।

Answer 1

पहले 2 प्रश्नों का उत्तर spec द्वारा दिया गया है।

पाश करने के लिए: animation-iteration-count: infinite;

और पृष्ठभूमि रंग साइकिल एक @keyframes नियम निर्दिष्ट शामिल है।

body { background: #0ff; } 

@-webkit-keyframes blink { 
    0% { background: rgba(255,0,0,0.5); } 
    50% { background: rgba(255,0,0,0); } 
    100% { background: rgba(255,0,0,0.5); } 
} 

@keyframes blink { 
    0% { background: rgba(255,0,0,0.5); } 
    50% { background: rgba(255,0,0,0); } 
    100% { background: rgba(255,0,0,0.5); } 
} 

#animate { 
    height: 100px; 
    width: 100px; 
    background: rgba(255,0,0,1); 
} 

#animate { 
    -webkit-animation-direction: normal; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-name: blink; 
    -webkit-animation-timing-function: ease; 

    animation-direction: normal; 
    animation-duration: 5s; 
    animation-iteration-count: infinite; 
    animation-name: blink; 
    animation-timing-function: ease;  
} 

(किसी भी लागू विक्रेता उपसर्गों भूल नहीं!)

जहाँ तक ब्राउज़र समर्थन चला जाता है के रूप में, मैं तुम्हें बारीकियों नहीं बता सकता, लेकिन किसी भी मामले में मैं सुविधा modernizr और एक के माध्यम से पता लगाने की सिफारिश करेंगे जावास्क्रिप्ट फॉलबैक।

यहां एक example है जो वेबकिट में काम करता है और कम से कम आपकी कुछ आवश्यकताओं को पूरा करता है। नोट: मैं मैक का उपयोग नहीं करता इसलिए मुझे आपके द्वारा संदर्भित प्रभाव के विनिर्देशों को सुनिश्चित नहीं किया गया था।

Answer 2

एक बार जब आपने स्टाइलशीट (-webkit-transition :) में एनीमेशन सेट किया है, तो आप बस जावास्क्रिप्ट के साथ रंग बदल सकते हैं।

function toggleColor(element) 
{ 
    var red = "rgba(255,0,0,0.5)"; 
    var transparent = "rgba(255,0,0,0)"; 
    element.style.backgroundColor = ((element.style.backgroundColor == red) ? transparent : red); 
    window.setTimeout(function() 
    { 
     toggleColor(element); 
    }); 
} 

वर्तमान में, केवल वेबकिट ब्राउज़रों (सफारी & क्रोम) समर्थन सीएसएस-एनिमेशन।