循环中的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和perspective：

@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>