<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*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.