<h1>TEXT ANIMATION 1</h1>
<h2>TEXT ANIMATION 2</h2>
<h3>TEXT ANIMATION 3</h3>
h1, h2, h3 {
font-size: 72px;
text-align: center;
font-weight: 900;
color: #000;
font-family: 'Futura', sans serif;
}
/*-----ANIMATIONS START-----*/
/*TEXT ANIMATION 1*/
@keyframes delay {
0% {opacity:0;}
100% {opacity:1;}
}
h1 {
animation-name: delay;
animation-duration: 2s;
animation-delay: 0s;
}
/*set an animation-delay of 2s*/
/*TEXT ANIMATION 2*/
@keyframes color {
0% {color: lightblue;}
25% {color: mistyrose;}
50% {color: khaki;}
100% {color: black;}
}
h2 {
animation-name: color;
animation-duration: 5s;
}
/*change the colors*/
/*change the animation-duration to 5s*/
/*change the animation-iteration-count*/
/*TEXT ANIMATION 3*/
@keyframes bounceIn {
0% {transform: scale(0.1);
opacity: 0;}
60% {transform: scale(1.2);
opacity: 1;}
100% {transform: scale(1);}
}
h3 {
animation-name: bounceIn;
animation-duration: 3s;
}
/*set an animation duration of 3s*/
/*set an animation-delay of 2s*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.