Pulse

index.html

<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>

<div class="heading">
	<h1>Pulse!</h1>
</div>

<div class="container">
	<span class="pulse"></span>
	<span class="pulse"></span>
	<span class="pulse"></span>
	<span class="pulse"></span>
</div>

Pulse.markdown

Pulse

A Pen by Chelsea Adams on CodePen.

License.

style.css

body{
	color: #F2F9E9;
	background-color: #272A2C;
}

h1, h2, h3{
	font-family: 'Bangers';
	font-size: 4rem;
	letter-spacing: 4px;
}
p{
	font-family: 'Open Sans';
}
.heading{
	margin: 0 auto;
	text-align: center;
	margin-top: 2%;
	width: 250px;
	h1{
		display: block;
	}
}
div.container{
	margin: 0 auto;
	text-align: center;
}

.pulse{
	display: inline-block;
	width: 70px;
	height: 70px;
	border: 15px solid #F2F9E9;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	position: relative;
	margin: 0 auto;
	z-index: 999999;
	opacity: 0;
	-webkit-animation: pulse 1.5s ease-out;
	-moz-animation: pulse 1.5s ease-out;
	animation: pulse 1.5s ease-out;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	&:nth-of-type(2){
		animation-delay: .25s;
	}
	&:nth-of-type(2){
		animation-delay: .5s;
	}
	&:nth-of-type(3){
		animation-delay: .75s;
	}
	&:nth-of-type(4){
		animation-delay: 1s;
	}
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    opacity: 0
  }
  25% {
    -webkit-transform: scale(0);
    opacity: .1
  }
  50% {
    -webkit-transform: scale(.075);
    opacity: .3
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0
  }
}