Untitled

dabblet.css

#heart {	
	transform: rotate(45deg);
	position: relative;
	width: 250px;
	height: 250px;
	margin: 200px auto;
}

#heart div {
	background-color: #ff0033;
	width: 250px;
	height: 250px;
	position: absolute;
}

.cirlce {	
	border-radius: 125px;		
}

#c1 {
	top: -125px;		
	animation: c1a 2s ease-in-out 0 infinite alternate;
                         
}

#c2 {
	right: -125px;	
	animation: c2a 2s ease-in-out 1s infinite alternate;
}

@keyframes c1a {
 0%   { top: -125px; }
 25%  { top: -125px; }
 75%  { top: 125px; }
 100% { top: 125px; }
}


@keyframes c2a {
  0%   { right: -125px; }
  25%  { right: -125px; }
  75%  { right: 125px; }
  100% { right: 125px; }
}

dabblet.html

<div id="heart">				
  <div class="square"></div>
  <div class="cirlce" id="c1"></div>
  <div class="cirlce" id="c2"></div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}