<h2 class="heading">Hello World! </h2>
.heading{
font-family: Verdana, sans-serif;
font-size: 400%;
padding-left:20px;
color: rosybrown;
animation-name: appear;
animation-duration: 10s;
animation-iteration-count: 3;
}
@keyframes appear{
0%{
opacity: 0;
}
20%{
opacity: 0.2;
font-size: 50%;
color: navajowhite;
}
40%{
opacity: 0.4;
font-size: 100%;
color: wheat;
}
60%{
opacity: 0.6;
font-size: 200%;
color: burlywood;
}
80%{
opacity: 0.8;
font-size: 300%;
color: tan;
}
100%{
opacity: 1;
font-size: 400%;
color: rosybrown;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.