लोड पर css3 संक्रमण एनीमेशन?

Question

जावास्क्रिप्ट का उपयोग किए बिना पृष्ठ लोड पर CSS3 संक्रमण एनीमेशन का उपयोग करना संभव है?

यह वही है जो मैं चाहता हूं, लेकिन पृष्ठ लोड पर:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

मैंने अब तक क्या पाया

• CSS3 संक्रमण-देरी , तत्वों पर प्रभाव में देरी का एक तरीका है। केवल होवर पर काम करता है।
• CSS3 कीफ़्रेम , लोड पर काम करता है लेकिन अत्यधिक धीमी गति से होता है। उसके कारण उपयोगी नहीं है।
• CSS3 संक्रमण काफी तेज है लेकिन पेज लोड पर चेतन नहीं है।

Comments

@blesh: लगभग कुछ भी - देखें, उदाहरण के लिए, mysociety.org/2011/08/11/mobile-operators-breaking-content और robertnyman.com/2006/04/25/…

— NickFitz

जब Key3 एनिमेशन का समर्थन नहीं किया जाता है तो Keyframes इसे पूरा करेंगे और सबसे अच्छी वापसी प्रदान करेंगे। आपको क्या लगता है कि वे बहुत धीमे हैं?

— 21

नमस्ते! लिंक अब टूट गया है और मुझे नहीं पता कि यह कहाँ जाना था इसलिए कोई इसे कृपया ठीक कर सकता है!

— Linux4Life531

Answer 1

आप किसी जावास्क्रिप्ट का उपयोग किए बिना पृष्ठ लोड पर एक सीएसएस एनीमेशन चला सकते हैं ; आपको बस CSS3 कीफ्रेम का उपयोग करना होगा ।

आइए एक उदाहरण देखें ...

यहां केवल CSS3 का उपयोग करके नेविगेशन मेनू को प्रदर्शित करने का प्रदर्शन है :

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

तोड़ दो...

यहाँ महत्वपूर्ण भाग keyframe एनीमेशन जो हम कहते हैं slideInFromLeft...

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

... जो मूल रूप से "शुरू में कहता है, हेडर अपनी पूरी चौड़ाई से स्क्रीन के बाएं हाथ के किनारे से दूर होगा और अंत में जगह में होगा"।

दूसरा भाग उस slideInFromLeftएनीमेशन को बुला रहा है :

animation: 1s ease-out 0s 1 slideInFromLeft;

ऊपर आशुलिपि संस्करण है, लेकिन यहाँ स्पष्टता के लिए क्रिया संस्करण है:

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

आप सभी प्रकार की दिलचस्प चीजें कर सकते हैं, जैसे सामग्री में फिसलना, या क्षेत्रों पर ध्यान आकर्षित करना।

यहाँ W3C का क्या कहना है।

Comments

क्या यह पेज लोड पर चलता है, और इससे पहले नहीं?

— रॉल्फ

बस ऊपर दिए गए प्रश्न का उत्तर देने के लिए, यह डिफ़ॉल्ट रूप से दिखाई देता है एनीमेशन शुरू होता है 0 एस लागू होने के बाद, बिना किसी देरी के। एक अतिरिक्त संपत्ति है, एनीमेशन-देरी, जिसे इसे नियंत्रित करने के लिए सेट किया जा सकता है। देखें: w3.org/TR/css3-animations/#animation-delay-property

— माइकल डेविस

यह सुनिश्चित करने के लिए कि दस्तावेज़ के लोड होने के बाद एनीमेशन शुरू होगा, बॉडी एलिमेंट के नीचे एक स्टाइलशीट में एनीमेशन कोड रखें या बॉडी एलिमेंट के नीचे स्टाइल टैग।

— टेलरमैक

मेरे ज्ञान के लिए @SuzanneEdelmanCreoconcept, IE9 संक्रमण संपत्ति का समर्थन नहीं करता है। आपके विकल्प जेएस या सुशोभित गिरावट होंगे।

— क्रिस स्पिल्ट्स

उत्कृष्ट उत्तर, 2019 में मेरी मदद की है!

— गोसी

Answer 2

बहुत कम जावास्क्रिप्ट आवश्यक है:

window.onload = function() {
    document.body.className += " loaded";
}

अब सीएसएस:

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

मुझे पता है कि प्रश्न "जावास्क्रिप्ट के बिना" है, लेकिन मुझे लगता है कि यह इंगित करने के लायक है कि जावास्क्रिप्ट की एक पंक्ति को शामिल करने का एक आसान समाधान है।

यह इनस्क्रिप्ट जावास्क्रिप्ट भी हो सकता है, कुछ इस तरह:

<body onload="document.body.className += ' loaded';" class="fadein">

बस इतना ही जावास्क्रिप्ट की जरूरत है।

Comments

थोड़ा फिक्स: <बॉडी ओनलोड = "डॉक्युमेंट.बॉडी। एटिट्यूड ('क्लास', 'लोडेड')">

— इवान

यदि पृष्ठ पर प्रतीक्षा करने की कोई आवश्यकता नहीं है तो onLoad ईवेंट को </ body> टैग: <script type = "text / javascript"> document.body.setAttribute ('class', 'load') से पहले इस कोड को सम्मिलित करना होगा; </ script>

— इवान

मौजूदा bodyकक्षाओं के ओवरराइड से बचने के लिए उपयोग करें:document.body.classList.add('loaded)

— व्यस्कलेव कोटरूटा

मुझे कक्षा को मौजूदा कक्षाओं में जोड़ने के document.body.className += " loaded";लिए थोड़ा कम वर्बोज़ मिला । loaded

— पिम शेफ

@PimSchaaf आपके सुझाव के लिए धन्यवाद, यह पूरी तरह से समझ में आता है। मैं इसे अभी संपादित करूँगा। आजकल आप क्लासिस्ट का भी उपयोग कर सकते हैं जो थोड़ा अधिक सुरुचिपूर्ण (लेकिन कम संगत) है।

— रॉल्फ

Answer 3

मुझे लगता है कि मुझे ओपी प्रश्न के लिए चारों ओर एक तरह का काम मिल गया है - पृष्ठ के 'on.load' पर एक संक्रमण शुरुआत के बजाय - मैंने पाया कि समान प्रभाव में एक अस्पष्टता फीका के लिए एक एनीमेशन का उपयोग करना, (मैं देख रहा था) ओपी के समान ही)।

इसलिए मैं पेज लोड पर काले पाठ रंग में सफेद (साइट पृष्ठभूमि के समान) से बॉडी टेक्स्ट फीका करना चाहता था - और मैं सोमवार से ही कोडिंग कर रहा हूं इसलिए मुझे 'on.load' स्टाइल चीज़ कोड की तलाश थी। लेकिन जेएस को अभी तक नहीं पता है - इसलिए यहां मेरा कोड है जो मेरे लिए अच्छा काम करता है।

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

और जो भी कारण के लिए, यह .classकेवल काम नहीं करता है #id(कम से कम मेरा नहीं)

आशा है कि यह मदद करता है - जैसा कि मुझे पता है कि यह साइट मुझे बहुत मदद करती है!

Answer 4

खैर, यह एक मुश्किल है।

जवाब है "वास्तव में नहीं"।

CSS एक कार्यात्मक परत नहीं है। इसमें क्या होता है या कब होता है, इसकी कोई जानकारी नहीं होती है। इसका उपयोग बस अलग-अलग "झंडे" (कक्षाओं, आईडी, राज्यों) में एक प्रस्तुति परत जोड़ने के लिए किया जाता है ।

डिफ़ॉल्ट रूप से, CSS / DOM, CSS का उपयोग करने के लिए किसी भी प्रकार के "लोड पर" स्थिति प्रदान नहीं करता है। यदि आप जावास्क्रिप्ट का उपयोग करना चाहते हैं / कर रहे हैं, तो आप bodyकुछ सीएसएस को सक्रिय करने के लिए एक कक्षा या कुछ को आवंटित करेंगे ।

कहा जा रहा है, आप उसके लिए एक हैक बना सकते हैं। मैं यहां एक उदाहरण दूंगा, लेकिन यह आपकी स्थिति पर लागू हो भी सकता है और नहीं भी।

हम इस धारणा पर काम कर रहे हैं कि "पास" "काफी अच्छा" है:

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

यहाँ हमारी CSS स्टाइलशीट का एक अंश दिया गया है:

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

हम इस धारणा पर भी चल रहे हैं कि आधुनिक ब्राउज़र उत्तरोत्तर प्रस्तुत करते हैं, इसलिए हमारा अंतिम तत्व अंतिम प्रस्तुत करेगा, और इसलिए यह सीएसएस अंतिम रूप से सक्रिय हो जाएगा।

Answer 5

@ रॉल्फ के समाधान के समान, लेकिन बाहरी कार्यों या कक्षा के साथ खेलने के संदर्भ को छोड़ दें। यदि अपारदर्शिता को एक बार लोड करने के लिए नियत रहना है, तो स्टाइल के माध्यम से सीधे अपारदर्शिता को बदलने के लिए इनलाइन स्क्रिप्ट का उपयोग करें। उदाहरण के लिए

<body class="fadein" onload="this.style.opacity=1">

जहां CSS sytle "फैडिन" को @ रॉल्फ के अनुसार परिभाषित किया गया है, जो संक्रमण को परिभाषित करता है और प्रारंभिक अवस्था में अस्पष्टता निर्धारित करता है (यानी 0)

एकमात्र पकड़ यह है कि यह स्पैन या डीआईवी तत्वों के साथ काम नहीं करता है, क्योंकि उनके पास काम का बोझ नहीं है

Answer 6

इसे बॉडी के होवर से शुरू करें। यह तब शुरू होगा जब माउस पहली बार स्क्रीन पर आता है, जो कि आगमन के बाद एक सेकंड के भीतर होता है, यहाँ समस्या यह है कि यह स्क्रीन से बाहर जाने पर उल्टा हो जाएगा।

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

सबसे अच्छी चीज जो मैं सोच सकता हूं: http://jsfiddle.net/faVLX/

पूर्णस्क्रीन: http://jsfiddle.net/faVLX/embedded/result/

नीचे टिप्पणियों को देखें संपादित करें:
यह किसी भी टचस्क्रीन डिवाइस पर काम नहीं करेगा क्योंकि कोई हॉवर नहीं है, इसलिए उपयोगकर्ता तब तक सामग्री नहीं देखेगा जब तक वे इसे टैप नहीं करते हैं। - रिच ब्रैडशॉ

Comments

हां, मुझे लगा कि मैं खुद बाहर हूं। अगर कुछ और काम न करे तो यह एक अच्छा काम है। उसके लिए एक वोट।

— जेन्स टॉर्नेल

यह एक भयानक विचार है - किसी भी टचस्क्रीन डिवाइस पर कोई हॉवर नहीं है, इसलिए उपयोगकर्ता तब तक सामग्री को नहीं देखेंगे जब तक कि वे इसे टैप न करें।

— रिच ब्रैडशॉ

Answer 7

सीएसएस केवल 3 एस की देरी के साथ

यहाँ लेने के लिए कुछ बिंदु:

• एक कॉल में कई एनिमेशन
• हम एक वाक् एनीमेशन बनाते हैं जो वास्तविक एक (हमारे मामले में दूसरा) को विलंबित करता है।

कोड:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

Answer 8

ठीक है, मैं एक एनीमेशन को प्राप्त करने में कामयाब रहा जब पृष्ठ केवल सीएसएस संक्रमण (जैसे!) का उपयोग करके लोड करता है।

मैंने 2 सीएसएस शैली की चादरें बनाई हैं: पहली यह है कि मैं एनीमेशन से पहले html स्टाइल कैसे चाहता हूं ... और दूसरा यह है कि मैं चाहता हूं कि पृष्ठ को एनीमेशन के बाद देख लिया जाए।

मुझे पूरी तरह से समझ में नहीं आया कि मैंने इसे कैसे पूरा किया है, लेकिन यह तभी काम करता है जब दो सीएसएस फाइलें (मेरे दस्तावेज़ के सिर में) कुछ जावास्क्रिप्ट द्वारा अलग की जाती हैं जो निम्नानुसार हैं।

मैंने इसे फ़ायरफ़ॉक्स, सफारी और ओपेरा के साथ परीक्षण किया है। कभी-कभी एनीमेशन काम करता है, कभी-कभी यह सीधे दूसरी सीएसएस फ़ाइल पर छोड़ देता है और कभी-कभी पृष्ठ लोड होता दिखाई देता है लेकिन कुछ भी प्रदर्शित नहीं होता है (शायद यह सिर्फ मैं हूं?)

<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

यहाँ मेरी कार्य-प्रगति वेबसाइट का लिंक है: http://www.hankins-design.co.uk/beta2/test/ind.net.html

शायद मैं गलत हूं, लेकिन मैंने सोचा कि जो ब्राउज़र सीएसएस संक्रमण का समर्थन नहीं करते हैं, उनके पास कोई समस्या नहीं होनी चाहिए क्योंकि उन्हें सीधे देरी या अवधि के बिना दूसरी सीएसएस फ़ाइल में छोड़ देना चाहिए।

मुझे यह जानने में दिलचस्पी है कि यह खोज विधि अनुकूल कैसे है। अपनी काली टोपी के साथ, मुझे लगता है कि मैं खोजशब्दों के साथ एक पृष्ठ भर सकता हूँ और इसकी अस्पष्टता पर 9999 की देरी लागू कर सकता हूँ।

मुझे यह जानने में दिलचस्पी होगी कि खोज इंजन संक्रमण-विलंब विशेषता से कैसे निपटते हैं और क्या, ऊपर दिए गए तरीके का उपयोग करके, वे पेज पर लिंक और जानकारी भी देखेंगे।

इससे भी महत्वपूर्ण बात यह है कि मैं वास्तव में जानना चाहूंगा कि यह पृष्ठ लोड होने के कारण हर बार संगत क्यों नहीं होता है और मैं इसे कैसे सुधार सकता हूं!

मुझे आशा है कि यह कुछ और विचार और राय उत्पन्न कर सकता है अगर कुछ और नहीं!

Answer 9

अगर किसी और को एक साथ दो संक्रमण करने में समस्या होती है, तो मैंने यहां क्या किया। पृष्ठ लोड पर मुझे ऊपर से नीचे आने के लिए पाठ की आवश्यकता थी।

एचटीएमएल

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

एचटीएमएल

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

सीएसएस

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

पता नहीं क्यों मैं 1 चयनकर्ता में 2 संक्रमण घोषणाओं का उपयोग करने की कोशिश करता रहा और (वास्तव में नहीं) यह सोचकर कि यह दोनों का उपयोग करेगा।

Answer 10

यहां तक ​​कि सरल समाधान (अभी भी [एक लाइन इनलाइन] जावास्क्रिप्ट के साथ):

इसे बॉडी टैग के रूप में उपयोग करें: ध्यान दें कि मेरे लिए काम किया body.या this.नहीं। केवल लंबी; (लिनक्स क्रोमियम) querySelectorके उपयोग की अनुमति देंclassList.remove

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

और अपने अन्य सीएसएस नियमों के शीर्ष पर इस लाइन को जोड़ें।

body.onload *{ transform: none !important; }

ध्यान दें कि यह अपारदर्शिता पर लागू हो सकता है (जैसा कि ओपी [अन्य पोस्टरों द्वारा अनुरोध किया गया है)) केवल एक संक्रमण ट्रिगर के रूप में अपारदर्शिता का उपयोग करके। (यहां तक ​​कि एक ही फैशन में किसी भी अन्य सीएसएस सत्तारूढ़ पर काम कर सकते हैं और आप ट्रिगर के बीच की देरी के लिए कई वर्ग का उपयोग कर सकते हैं)

तर्क वही है। कोई भी परिवर्तन लागू न करें ( :none !importantसभी बच्चे के तत्व पर body.onloadऔर दस्तावेज़ लोड होने के बाद कक्षा में सभी संक्रमणों को ट्रिगर करने के लिए वर्ग को हटा दें।

पहली बार से पहले (शॉक एंकर के लिए देखें)

यहाँ एक रिवर्स समाधान है:

1. अपना HTML लेआउट बनाएं और अपने अंतिम परिणाम के अनुसार सीएसएस सेट करें (आप चाहते हैं कि सभी परिवर्तन के साथ)।
2. अपनी पसंद के अनुसार संक्रमण गुण सेट करें
3. उन तत्वों में एक वर्ग (जैसे: वेटलोड) जोड़ें, जिन्हें आप AFTER लोड बदलना चाहते हैं। सीएसएस कीवर्ड ! महत्वपूर्ण यहाँ महत्वपूर्ण शब्द है।
4. एक बार दस्तावेज़ लोड होने के बाद, परिवर्तन शुरू करने के लिए तत्वों से वर्ग को हटाने के लिए जेएस का उपयोग करें (और संक्रमण को हटा दें: कोई भी ओवरराइड नहीं)।

कई तत्वों पर कई संक्रमण के साथ काम करता है। क्रॉस-ब्राउज़र संगतता की कोशिश नहीं की।

#rotated{
    transform : rotate(90deg) /* any other transformation */;
    transition  3s;
}
#translated{
    transform : translate(90px) /* any other transformation */;
    transition  3s;
}
.waitload{
    transform: none !important;
}

<div id='rotated' class='waitload'>
    rotate after load
</div>
<div id='translated' class='waitload'>
    trasnlate after load
</div>
<script type="text/javascript">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>

Answer 11

वास्तव में नहीं, सीएसएस जितनी जल्दी हो सके लागू किया जाता है, लेकिन तत्व अभी तक नहीं खींचे जा सकते हैं। आप 1 या 2 सेकंड की देरी का अनुमान लगा सकते हैं, लेकिन यह अधिकांश लोगों के लिए सही नहीं होगा, जो उनके इंटरनेट की गति पर निर्भर करता है।

इसके अलावा, यदि आप उदाहरण के लिए कुछ फीका करना चाहते हैं, तो इसके लिए सीएसएस की आवश्यकता होगी जो वितरित की जाने वाली सामग्री को छुपाता है। यदि उपयोगकर्ता के पास CSS3 संक्रमण नहीं हैं, तो वे इसे कभी नहीं देखेंगे।

मैं jQuery का उपयोग करने की सलाह दूंगा (उपयोग में आसानी के लिए + आप अन्य यूएएस के लिए एनीमेशन जोड़ना चाह सकते हैं) और इस तरह से कुछ जेएस:

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

CSS में जोड़े गए बदलावों के साथ। यदि आवश्यक हो तो विरासत ब्राउज़रों में दूसरी सीएसएस के बजाय आसानी से चेतन के उपयोग की अनुमति है।

Comments

यह उत्तर क्यों स्वीकार किया गया? यह वास्तव में कुछ भी नहीं करता है जो प्रश्न के लिए पूछा गया है। यह बस (और बहुत जल्दी, कभी-कभी अनजाने में) तत्व को अदृश्य करना शुरू कर देता है, एक दूसरे (200 एमएस) के छोटे अंश का इंतजार करता है, फिर तुरंत इसे फिर से दिखाई देता है। वह फीका नहीं है, आखिरी बार मैंने जाँच की थी।

— 22

आप पर एक सीएसएस संक्रमण शामिल होगा #id_to_fade in, हालांकि मैं सहमत हूं, यह जवाब से स्पष्ट नहीं है।

— रिच ब्रैडशॉ

जैसे, jQuery कॉल में एक और .css ({संक्रमण: 'अस्पष्टता 2s'}) जोड़ें? या सिर्फ अपने सीएसएस में? मुझे लग रहा है कि मैं ऐसा महसूस करने वाला हूं कि यह एक बेवकूफी

— भरा

यह ठीक है - मुझे वास्तव में एक डेमो डालना चाहिए था। CSS में, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, -moz-साथ ही उपसर्ग।

— रिच ब्रैडशॉ

यह स्वीकृत उत्तर नहीं होना चाहिए, कुंजी-फ़्रेम का उपयोग करने का तरीका है।

— एडुआर्डो नवेदा