Animation

CSS animation allows you to create more complex sequences of transitions by defining keyframes. It can run continuously or a set number of times.

@keyframes beat {
  0% { transform: rotate(-45deg) scale(1); }
  50% { transform: rotate(-45deg) scale(1.5); }
  100% { transform: rotate(-45deg) scale(1); }
}

.heart {
  animation: beat 1s linear infinite;
}

.heart {
  width: 50px;
  height: 50px;
  background-color: red;
  transform: rotate(-45deg);
  margin: 50px;
}
.heart::before, .heart::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}
.heart::before { left: 25px; }
.heart::after { top: -25px; }