JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="centerhex fadein transtart done"></div>
</div>

CSS

.container{
    position: absolute;
    width: 224px;
    height: 220px;
    background-color: black;
}
.centerhex{
	background-image:url(http://i.imgur.com/4sZDtfK.png);
	height:224px;
	width:210px;
	position:absolute;
}
.done{
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s;
}
.transtart{
    opacity:0
}
.fadein{	
	animation:fadein 0.65s;
	animation-timing-function:linear;
	animation-fill-mode:forwards;
	animation-iteration-count:1;
	-webkit-animation-iteration-count:1;
	-webkit-animation:fadein 0.65s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-fill-mode: forwards;
}
.pulse{	
	animation:fadein 4s;
	animation-timing-function:linear;
	animation-fill-mode:forwards;
	animation-iteration-count:infinite;
	animation-delay:1s
	-webkit-animation-delay:1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation:fadein 4s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes fadein { 
0%{opacity:0;}
40%{opacity:1;}
50%{opacity:1;}
100%{opacity:0.05;} 
}
@keyframes fadein {
0%{opacity:0;}
40%{opacity:1;}
50%{opacity:1;}
100%{opacity:0.05;} 
}
@-webkit-keyframes pulse { 
0%{opacity:0.05;}
10%{opacity:0.1;}
13%{opacity:0.1;}
100%{opacity:0.05;} 
}
@keyframes pulse {
0%{opacity:0.05;}
10%{opacity:0.1;}
13%{opacity:0.1;}
100%{opacity:0.05;} 
}