Page 85 - COPA VOL II of II - TP -Punjabi
P. 85
<h2
animation-duration: 4s; reverse</h2> text for animation alternate-
animation-iteration-count:
</body>
background-color: rgb(255, 210, 85) ; </html>
}
#one { ਆਉਟਪੁੱਟ
animation-timing-function: ease;
}
#two {
animation-name: color;
animation-duration: 10s;
}
#three {
animation-name: color;
animation-duration: 2s;
animation-iteration-count :
CSS ਬਟਨ
}
ਉਦਾਹ੍ਨ 1:
#four {
animation-direction: reverse; <!DOCTYPE html>
} <html>
{ <head>
animation-direction: alternate-reverse; < title> button background Color </title>
} <style>
@keyframes text { . button {
f rom { background-color: red;
margin-left: 100%; color: white;
} text-align: center;
t o { font-size: 20px;
margin-left: 0%; }
} . b1 {
} /* Set border property */
@keyframes color { border: none;
f rom { }
background-color: red; . b2 {
} /* Set border property */
t o { border: 2px black solid;
background-color: green; }
} . b3 {
</style> /* Set border property */
</head> border: 2px black dashed;
<body> }
<div class=”a”>Welcome to NIMI</div > . b4 {
<div class=”b”>a NIMI portal for Online Books</div> /* Set border property */
<h2 i d=”one”>This t ext f or ease animation-timing- border: 2px black double;
function</h2> }
<h2 id=”two”>This text for animation-delay</h2> . b5 {
id=”three”>This text for animatio n delay /* Set border property */
<h2
h2> border: 2px black groove;
<h2 id=”four”>This text for animation reverse</h2> }
IT ਅਤੇ ITES : COPA (NSQF - ਸੰਸ਼ੋਧਭਤ 2022) - ਅਿਭਆਸ 1.31.114 71
