Heart Beating

Heart Beating

by AndrewBuntsev

HTML

<div id="heart"></div>

CSS

:root{
  --width: 150px;
  --color: rgb(255, 51, 0);
}


#heart{
  width: var(--width);
  height: var(--width);
  position: fixed;
  top: 40%;
  left: 40%;
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  transform: rotate(45deg);
  animation-name: heartbeat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#heart::before{
  content: "";
  width: var(--width);
  height: var(--width);
  position: absolute;
  transform: translateX(-50%);
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  border-radius: 50%;
}

#heart::after{
  content: "";
  width: var(--width);
  height: var(--width);
  position: absolute;
  transform: translateY(-50%);
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  border-radius: 50%;
}


@keyframes heartbeat{
  0% {transform: scale(1.0) rotate(45deg);}
  20% {transform: scale(1.1) rotate(45deg);}
  100% {transform: scale(1.0) rotate(45deg);}