Scale animation

by jessekinsman

HTML

<div class="specialCallout"><span>Includes</span><br /> special offer on best-selling teacher products!</div>

CSS

.specialCallout {
	padding: 2em;
	border: solid 4px #79c8e4;
	background-color: #79C8E4;
	box-shadow: inset 0 0 35px #1896d2;
	border-radius: 50%;
	text-align: center;
	font-size: 1em;
	color: #fff;
	margin-top: 20px;
	display: inline-block;
	width: 100px;
	animation-name: scale;
	animation-duration: 1500ms;
	animation-iteration-count: 1;
  animation-delay: 2s;
}
.specialCallout span {
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: 600;
}
	@keyframes scale {
		0% {transform: scale(1, 1)}
    50% {transform: scale(1.5, 1.5)}
		100% {transform: scale(1, 1)}
	}