6
मैंने एक एंकर लिंक बटन बनाया है जहां मैं स्पिनर एनीमेशन दिखाना चाहता हूं जब मैं :focus स्थिति में बटन पर क्लिक करता हूं। मैं एनीमेशन दिखाने के लिए फ़ॉन्ट विस्मयकारी का उपयोग कर रहा हूं लेकिन जब मैं बटन पर क्लिक करता हूं, तो स्पिनर एनीमेशन काम नहीं कर रहा है।स्पिनर कताई/घूर्णन क्यों नहीं कर रहा है?
नोट: मैं यहाँ जावास्क्रिप्ट का उपयोग नहीं करना चाहते हैं तो बस के साथ शुद्ध सीएसएस
यहाँ क्या करना चाहते हैं CodePen लिंक https://codepen.io/rhulkashyap/pen/vLPNdQ
है
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
body {
font-family: 'Titillium Web', sans-serif;
text-align: center;
}
#button {
padding: 15px;
background-color: green;
color: #fff;
text-decoration: none;
border-radius: 5px;
width: 300px;
display: inline-block;
text-align: center;
font-size: 25px;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#button:before {
content: "\f090";
font-family: FontAwesome;
margin-right: 5px;
}
#button:focus {
background-color: #02b402;
}
#button:focus:before {
content: "\f1ce";
-webkit-animation: spin .8s ease infinite;
animation: spin .8s ease infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<h2> Click Here</h2>
<a id="button" href="javascript:void(0)">Enter In</a>
यह ठीक से काम करने लगता है (क्रोम) लगता है। आप किस ब्राउजर का उपयोग कर रहे हैं और * काम नहीं कर रहे * से आपका क्या मतलब है? – Harry
मैं फ़ायरफ़ॉक्स डेवलपर संस्करण –