Medium Challenge 01 Solution

index.html

<div class="wrapper">
<div class="heart"></div>
</div>

Medium Challenge 01 Solution.markdown

Medium Challenge 01 Solution

A Pen by Marvin Mieth on CodePen.

License.

style.css

.heart {
	padding: 50px;
	animation: heart-anim 1.1s ease-out infinite;
	width: 50px;
	height: 80px;
}
.heart:before, .heart:after {
	width: 50px;
	height: 80px;
	background: red;
	content: '';
	display: block;
	position: absolute;
	border-radius: 50px 50px 0 0
}

.heart:before {
	transform: translate(22px, 0) rotate(45deg)
}
.heart:after {
	transform: rotate(-45deg)
}

@keyframes heart-anim {
	0%, 30%, 70% {
		transform: scale(1);
	}
	15%, 45% {
		transform: scale(1.3);
	}
}