karuna24s/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Bounce In</title>
    </head>
    <body>
        <div><h1>Bounce In</h1></div>
        <p>Example from <a href="https://robots.thoughtbot.com/css-animation-for-beginners">CSS Animation for Beginners by Rachel Cope</a>, December 04, 2014</p>
    </body>
</html>

## styles.css
@keyframes bounceIn {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1.2);
    transform: rotate(270deg);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes changeColor {
    0% {
        transition-property: background-color;
        background-color: red;
        transition-delay: 2s;
        transition-duration: 5s;
        }
    60% {
        transition-property: background-color;
        background-color: purple;
        transition-delay: 2s;
        transition-duration: 5s;
        }
    100% {
        transition-property: background-color;
        background-color: blue;
        transition-delay: 2s;
        transition-duration: 5s;
        }
}

h1 {
  font-family: Impact;
  font-size: 60px;
  color: darkturquoise;
  text-align: center;
  animation: bounceIn;
  animation-duration: 1.5s;
}

div {
  height: 500px;
  width: 600px;
  padding-top: 150px;
  background-color: white;
  animation: changeColor;
  animation-duration: 1.5s;
}

p {
   font-family: arial;
   font-size: 12px;
   position: absolute;
   bottom: 0px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bounce In</title>
	</head>
	<body>
	<div><h1>Bounce In</h1></div>
	<p>Example from <a href="https://robots.thoughtbot.com/css-animation-for-beginners">CSS Animation for Beginners by Rachel Cope</a>, December 04, 2014</p>
	</body>
	</html>
	@keyframes bounceIn {
	0% {
	transform: scale(0);
	}

	60% {
	transform: scale(1.2);
	transform: rotate(270deg);
	}

	100% {
	transform: scale(1);
	}
	}

	@keyframes changeColor {
	0% {
	transition-property: background-color;
	background-color: red;
	transition-delay: 2s;
	transition-duration: 5s;
	}
	60% {
	transition-property: background-color;
	background-color: purple;
	transition-delay: 2s;
	transition-duration: 5s;
	}
	100% {
	transition-property: background-color;
	background-color: blue;
	transition-delay: 2s;
	transition-duration: 5s;
	}
	}

	h1 {
	font-family: Impact;
	font-size: 60px;
	color: darkturquoise;
	text-align: center;
	animation: bounceIn;
	animation-duration: 1.5s;
	}

	div {
	height: 500px;
	width: 600px;
	padding-top: 150px;
	background-color: white;
	animation: changeColor;
	animation-duration: 1.5s;
	}

	p {
	font-family: arial;
	font-size: 12px;
	position: absolute;
	bottom: 0px;
	}