CSSアニメーション

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  animation-name: animation;
  animation-duration: 2s;
  animation-iteration-count:infinite;
}

@keyframes animation{
  0%{
    width: 0;
  }
  100%{
    width: 100%;
  }
}

<div class="rotate"></div>

.rotate {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count:infinite;
}

@keyframes rotate{
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}

<div class="scale"></div>

.scale {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  animation-name: scale;
  animation-duration: 2s;
  animation-iteration-count:infinite;
}

@keyframes scale{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.5);
  }
  100%{
    transform: scale(0);
  }
}

<a class="btn" href="#">ボタン</h2>

.btn {
  width: fit-content;
  padding: 20px 60px;
  background-color: #ccc;
  animation-name: btn;
  animation-duration: 2s;
  animation-iteration-count:infinite;
  display: block;
}

@keyframes btn{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  75%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.2);
  }
}