:root {
  --bg-color: darkred;
}
body {
  background-color: var(--bg-color, darkred);
}
.circle {
  width: 115px;
  height: 115px;
  background-color: black;
  border-radius: 50%;
  margin: 100px;
  transform: scale(1);
  transition: all 1s ease-in;
}
.smalller:hover {
  transform: scale(.50);
  transition: all 1s ease-in;
}
.biggger:hover {
  transform: scale(1.50);
  transition: all 1s ease-in;
}
.square, .square-animate {
  width: 115px;
  height: 115px;
  background-color: black;
  margin: 100px;
  transition: all 1s ease-in;
}
.square:hover {
  border-radius: 50%;
  transition: all 1s ease-in;
}
.triangle, .triangle-animate{
  width: 0;
  height: 0;
  background-color: black;
  margin: 100px;
  transition: all 1s ease-in;
  border-bottom: 115px solid;
  border-left: 57.5px solid var(--bg-color, darkred);
  border-right: 57.5px solid var(--bg-color, darkred);
}
.triangle:hover {
  border-left: 57.5px solid;
  border-right: 57.5px solid;
  transition: all 1s ease-in;
}
.animation {
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.square-animate {
  animation-name: squares;
}
.triangle-animate{
  animation-name: triangle;
}
.circle-animate{
  animation-name: circle;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#second{
  animation-name: paused-circle;
  animation-duration: 12s;
}
#third{
  animation-name: circle-paused;
  animation-duration: 12s;
}
@keyframes squares {
  100%{
    border-radius: 50%;
  }
}
@keyframes triangle {
  100% {
    border-left: 57.5px solid;
    border-right: 57.5px solid;
  }
}
@keyframes circle {
  25% {
    transform: scale(1.50);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(0.50);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes paused-circle {
  33.3333% {
    transform: scale(1);
  }
  41.66666% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(1);
  }
  58.3333% {
    transform: scale(0.50);
  }
  66.6666% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.5);
  }
  83.3333% {
    transform: scale(1);
  }
  91.6666% {
    transform: scale(0.50);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes circle-paused {
  66.6666% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.5);
  }
  83.3333% {
    transform: scale(1);
  }
  91.6666% {
    transform: scale(0.50);
  }
  100% {
    transform: scale(1);
  }
}