इस सीएसएस कथन में "@" का क्या अर्थ है?

Question

@-webkit-keyframes roll { 
    100% { -webkit-transform: rotate(360deg); } 
} 

"@" और "100%" का क्या अर्थ है?

Answer 1

ये CSS3 नियम हैं जिन्हें CSS3 विनिर्देशन के हिस्से के रूप में औपचारिक स्वीकृति से पहले वेबकिट विकास टीम द्वारा परिभाषित किया गया है- इसलिए चयनकर्ता में -वेबकिट शामिल करना। @ संकेत करता है कि यह एक मानक चयनकर्ता के बजाय एक सीएसएस नियम है। @ -webkit-keyframes सीएसएस दृश्य प्रभाव एनीमेशन गुणों के लिए keyframes निर्दिष्ट करने के लिए है।

आप एनीमेशन के लिए जितना चाहें उतने कीफ्रेम को परिभाषित कर सकते हैं; यदि आपने केवल अंतिम कीफ्रेम दिया है (जब एनीमेशन का 100% पूरा हो गया है) को परिभाषित किया गया है। The full syntax and documentation for these rules can be found here.

उदाहरण के लिए

, अगर आप एनीमेशन धीरे धीरे शुरू करें और फिर तेजी लाने, जबकि शुरू करने और सुचारू रूप से खत्म होने वाली है, तो आप मध्यवर्ती मुख्य-फ़्रेम कि रोटेशन की डिग्री में गैर रेखीय चरणों था सेट कर सकते हैं करना चाहते थे:

@-webkit-keyframes roll { 
    25% { -webkit-transform: rotate(24deg); 
      -webkit-animation-timing-function: ease-in; 
     } 
    50% { -webkit-transform: rotate(72deg); } 
    75% { -webkit-transform: rotate(168deg); } 
    100% { -webkit-transform: rotate(360deg); 
     -webkit-animation-timing-function: ease-out; 
     } 
} 

Answer 2

"@" स्टाइलशीट में एक एट-नियम घोषित करता है। हर मामले में यह निश्चित रूप से एक विशेष अर्थ है।

"100%" @keyframes नियम द्वारा परिभाषित सीएसएस एनीमेशन की अंतिम स्थिति को संदर्भित करता है, या इस मामले में @ -webkit-keyframes नियम। आपको वास्तव में एनीमेशन के पहले (0%) और अंतिम (100%) राज्यों को घोषित करना होगा ताकि उपयोगकर्ता एजेंट को एनीमेशन शुरू करने और बंद करने के बारे में पता चल सके।

यहां कुछ और है: एट-नियम प्रतिपादन इंजन के लिए निर्देश हैं; वे नियमित चयनकर्ता और घोषणा ब्लॉक से परे सीएसएस नियम सेट वाक्यविन्यास का विस्तार करते हैं। एट-रूल्स को एट-कीवर्ड के साथ घोषित किया जाता है, जो कि "@keyword" है, उसके बाद इस्तेमाल किए गए एट-कीवर्ड के सापेक्ष एक एट-नियम स्टेटमेंट होता है। उदाहरण: @ चार्ससेट "आईएसओ -885 9-15";

वैकल्पिक तर्क एट-नियम स्टेटमेंट प्रकार के आधार पर एट-कीवर्ड का पालन कर सकते हैं। उदाहरण: @media स्क्रीन {रंग: # 000; }, जहां स्क्रीन वैकल्पिक तर्क है।