CSS3 Animation @keyframes Rule

CSS3 Animation @keyframes Rule

टिप्स हिंदी में

आज तक आपने टेक्स्ट को या किसी भी चित्र को दाएं से बाएं या बाएं से दाएं या ऊपर से नीचे या नीचे से ऊपर स्लाइड करते देखा है | पर इस प्रकार के इफेक्ट के लिए या तो जावा स्क्रिप्ट का प्रयोग किया जाता है या फिर फ्लैश का | CSS-3 के नए रूल में इस सबको छोड़ दिया गया है | CSS-3 के नए रूल में भरी भरकम कोड को छोड़ कर छोटा सा कोड अपनाने के बाद एनीमेशन के प्रभाव को दिखे जा सकता है | आप इसी पोस्ट पर एनिमेशन के प्रभाव को देख सकते हैं कि कैसे टिप्स हिंदी में को एक आयत में लिख कर एनीमेशन का प्रयोग किया गया है | इस प्रकार के कोड को अपने ब्लॉग पर स्थापित करके इसका प्रयोग करना काफी आसान है | आप इस कोड में अपने मनमुताबिक बदलाव भी कर सकते हैं, जबकि जावा स्क्रिप्ट में अपने मनमुताबिक बदलाव करना नए ब्लॉगर के लिए संभव नहीं था |

1. अब ये जानेगे की इसका प्रयोग कैसे करना है ?
2. सबसे पहले आप निम्न बटन पर कलिक करके इस कोड को अपने ब्लॉग पर स्थापित कर लें |

3. अब निम्न कोड को ध्यान से देखें | आपने भी इसी प्रकार से लिखना है |

<p class="kesri">
<keyframe_animation>टिप्स हिंदी में </keyframe_animation>
<br class="clear"/>
<br class="clear"/>
<text >आज तक आपने टेक्स्ट को या किसी भी चित्र को दाएं से बाएं या बाएं से दाएं या ऊपर से नीचे या नीचे से ऊपर स्लाइड करते देखा है | पर इस प्रकार के इफेक्ट के लिए या तो जावा स्क्रिप्ट का प्रयोग किया जाता है या फिर फ्लैश का | CSS-3 के नए रूल में इस सबको छोड़ दिया गया है | CSS-3 के नए रूल में भरी भरकम कोड को छोड़ कर छोटा सा कोड अपनाने के बाद एनीमेशन के प्रभाव को दिखे जा सकता है | आप इसी पोस्ट पर एनिमेशन के प्रभाव को देख सकते हैं कि कैसे टिप्स हिंदी में को एक आयत में लिख कर एनीमेशन का प्रयोग किया गया है | इस प्रकार के कोड को अपने ब्लॉग पर स्थापित करके इसका प्रयोग करना काफी आसान है | आप इस कोड में अपने मनमुताबिक बदलाव भी कर सकते हैं, जबकि जावा स्क्रिप्ट में अपने मनमुताबिक बदलाव करना नए ब्लॉगर के लिए संभव नहीं था |</text>
</p>

4. आपने ये प्रक्रिया एडिट मोड में करनी है |
5. बस इतना भर करना है |

<center> <marquee onmouseover="this.stop()" onmouseout="this.start()" class="myspace-marquee" direction="left" behavior="alternate" scrollamount="2" width="290" height="20"><a href="http://cityjalalabad.blogspot.com/2012/08/CSS3-Animation-@keyframes-Rule.html">विजेट आपके ब्लॉग पर </a></marquee> <br/> <style type="text/css"> .kesri text { color:blue; display:block; text-indent:0px; padding-top:5px; letter-spacing:1px; text-align:justify; font: 17px Georgia, "Times New Roman", Times, serif; background-color: none; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; height: auto; width:400px; background-position: 0px 0px; margin-right: 1px; margin-left: 90px; margin-bottom: 25px; margin-top: -20px; } .kesri { width:600px; margin-bottom:10px; margin-top:10px; display:block; clear:both; border:5px solid #f60; position:relative; padding:10px 10px 5px; text-align: justify; } keyframe_animation { width:100px; height:100px; padding:5px; color:white; font-size:14px; background:red; position:relative; animation-name:myfirst; animation-duration:15s; animation-timing-function:linear; animation-delay:5s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Firefox: */ -moz-animation-name:myfirst; -moz-animation-duration:15s; -moz-animation-timing-function:linear; -moz-animation-delay:5s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:15s; -webkit-animation-timing-function:linear; -webkit-animation-delay:5s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; /* Opera: */ -o-animation-name:myfirst; -o-animation-duration:15s; -o-animation-timing-function:linear; -o-animation-delay:5s; -o-animation-iteration-count:infinite; -o-animation-direction:alternate; -o-animation-play-state:running; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:#f40; left:520px; top:0px;} 50% {background:blue; left:520px; top:475px;} 75% {background:green; left:0px; top:475px;} 100% {background:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:#f40; left:520px; top:0px;} 50% {background:blue; left:520px; top:475px;} 75% {background:green; left:0px; top:475px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:#f40; left:520px; top:0px;} 50% {background:blue; left:520px; top:4750px;} 75% {background:green; left:0px; top:4750px;} 100% {background:red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px;} 25% {background:#f40; left:520px; top:0px;} 50% {background:blue; left:520px; top:4750px;} 75% {background:green; left:0px; top:475px;} 100% {background:red; left:0px; top:0px;} } .clear {clear: both; height: 10px; width: 100%;} </style> </center>

क्या आपको ये आई-मैजिक अंदाज़ पसंद आया ? यदि हां !!! तो अपने विचारों से अवगत कराएं |

"टिप्स हिन्दी में ब्लॉग" की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त पाएं !