CSS unhover属性

Question

我试图为圆形边框设置动画,当你悬停时它会变成正方形,然后在你取消悬停后回到圆圈.尽管我付出了最大的努力,但我似乎无法使其发挥作用.这是我到目前为止所拥有的.

@keyframes mymove {
  from {
    border-radius: 100% 100%;
  }
  to {
    border-radius: 0px, 0px;
  }
}

@keyframes mymoveback {
  from {
    border-radius: 0px 0px;
  }
  to {
    border-radius: 100%, 100%;
  }
}

.testButt {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 3s;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation: mymoveback 3s;
  animation-fill-mode: forwards;
}

.testButt:hover {
  -webkit-animation-fill-mode: forwards;
  animation: mymove 2s;
  animation-fill-mode: forwards;
}

<br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div class="testButt">
  <br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Log In
</div>

Answer 1

你复杂化它,只需使用这样的转换:

.testButt {
  width: 100px;
  height: 100px;
  padding:40px 0;
  text-align:center;
  box-sizing:border-box;
  background: red;
  position: relative;
  border-radius: 50%;
  transition: 0.5s;
}

.testButt:hover {
  border-radius: 0%;
}

<div class="testButt">
  Log In
</div>