css按钮无限循环缩放

[zhn4]

面试遇到一个按钮无限循环缩放问题，记录一下

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
demo：http://jsbin.com/dadopihala/edit?html,css,output

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

@keyframes shensuo {
  from {
    width: 20px
    height: 20px;
  }
  to {
    width: 200px;
    height: 200px;
  }
}

.box {
  border: 1px solid red;
  width: 40px;
  height: 40px;
  animation: shensuo 1.5s infinite linear;
}

另一个sale的方法
demo：http://jsbin.com/pajojoyeqi/edit?html,css,output

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

@keyframes suofang {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}

.box {
  width: 40px;
  height: 40px;
  border: 1px solid red;
  animation: suofang 1s infinite linear;
}