CSS 3D анимация преобразования размера в цикле

Question

Я пытаюсь сделать div точно таким же, как http://red -button.webflow.io / , но не получаю точных результатов

Мой код ниже

@keyframes scale-div {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1)
  }
  100% {
    transform: scale(0);
  }  
}
@keyframes scale-border {
  0% {
    width: 200px;
    height: 35px;
  }
  50% {
    width: 250px;
    height: 50px;
  }
  100% {
    width: 200px;
    height: 35px;
  }  
}



.scale {
  position: absolute;
  border-radius: 0%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  animation: scale-border 2s steps(300, end) infinite;
 content: '';
   border-radius: 5px;
    background: #d70b0b;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .33);
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    padding: 9px 15px;
    color: white;
    border: 0;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
    text-align: center;

line-height: -moz-block-height;
}

 <div class="scale">Get A Free Estimate</div>

Я достиг 70% результатов, но не 100%

Требуется точно такая же анимация и преобразование размера текста и блока, как в примере ссылки

Answer 1

Просто используйте масштабную анимацию, как показано ниже:

@keyframes scale-div {
  to {
    transform:translate(-50%, -50%) scale3d(1.05,1.05,1);
  }
}

.scale {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style:preserve-3d;
  animation: scale-div 0.5s infinite linear alternate;
  border-radius: 5px;
  background: #d70b0b;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .33);
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  padding: 9px 15px;
  color: white;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

<div class="scale">Get A Free Estimate</div>

Чтобы избежать плохого эффекта для текста, вы можете рассмотреть translateZ и перспективу:

@keyframes scale-div {
  to {
    transform:perspective(100px) translate(-50%, -50%) translateZ(5px);
  }
}

.scale {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:perspective(100px) translate(-50%, -50%);
  transform-style:preserve-3d;
  animation: scale-div 0.5s infinite linear alternate;
  border-radius: 5px;
  background: #d70b0b;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .33);
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  padding: 9px 15px;
  color: white;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

<div class="scale">Get A Free Estimate</div>