क्या सीएसएस कीफ्रेम एनीमेशन का उपयोग छद्म-तत्व जैसे 'पहले' और 'बाद' के लिए करना संभव है? मैं स्मार्टफोन के लिए webservice विकसित कर रहा हूं, और तत्व को झपकी देना चाहता हूं। लेकिन तत्व खुद को झपकी नहीं देना चाहते हैं। तो, जिन तरीकों से मैं आया हूं वे दो हैं; एक तत्व को अन्य तत्व के साथ कवर करना है, और उस तत्व को झपकी देना; और दूसरा छद्म-तत्व का उपयोग करना है, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है।क्या छद्म-तत्व के लिए कीफ्रेम एनीमेशन का उपयोग करना संभव है?
सीएसएस:
.fadeElement {
background-color: #000000;
width: 60px;
height: 60px;
}
.fadeElement:after {
display: block;
content: '';
position: relative;
height: 100%;
width: 100%;
z-index: 500;
background-color: rgba(249, 4, 0, 0.5);
animation-name: 'fade';
animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-name: 'fade';
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
@keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
एचटीएमएल:
Internet Explorer 10 भी छद्म तत्वों एनिमेट। – Sampson