CSS - 带有边框半径的动画比例

Question

我正在制作一个带有缩放框的动画，它以 8 像素四舍五入。参考：https://codepen.io/anon/pen/ePGxqy。但是，当盒子展开时，圆角很奇怪，我不想通过改变它在关键帧中的宽度来缩放它。如何正确缩放带有圆角边框的圆角框？

#box {
  position: relative;
  width: 55px;
  height: 55px;
  background: #aaa;
  margin: 0 auto;
  border-radius: 8px;
  animation-name: singleRevert;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

#box:hover {
  animation-name: singleExpend;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes singleRevert {
  0% {
    transform: scaleX(7.5) scaleY(0.46)
  }
  50% {
    transform: scaleX(1) scaleY(0.46)
  }
  100% {
    transform: scaleX(1) scaleY(1)
  }
}

@keyframes singleExpend {
  0% {
    transform: scaleX(1) scaleY(1)
  }
  50% {
    transform: scaleX(1) scaleY(0.46)
  }
  100% {
    transform: scaleX(7.5) scaleY(0.46)
  }
}

<div id="box"></div>

Answer 1

基本上，您需要为边框半径设置动画以匹配框的比例。

为简单起见，如果您的框半径为 8 像素，并且您将框缩放 8 倍，那么您的边框半径应为 1 像素。如果您的框缩放为 0.5，则边框将为 16px；

或者，您可以为框的宽度和高度设置动画。这将尊重边界，在这种情况下您不必更改它们。

更新了你的版本：

#box {
  position: relative;
  width: 55px;
  height: 55px;
  background: #aaa;
  margin: 0 auto;
  border-radius: 8px;
  animation-name: singleRevert;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

#box:hover {
  animation-name: singleExpend;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes singleRevert {
  0% {
    transform: scaleX(8) scaleY(0.5);
    border-radius: 1px;
  }
  50% {
    transform: scaleX(1) scaleY(0.5)
    border-radius: 8px;
  }
  100% {
    transform: scaleX(1) scaleY(1)
    border-radius: 8px;
  }
}

@keyframes singleExpend {
  0% {
    transform: scaleX(1) scaleY(1)
    border-radius: 8px;
  }
  50% {
    transform: scaleX(1) scaleY(0.5)
    border-radius: 8px;
  }
  100% {
    transform: scaleX(8) scaleY(0.5)
    border-radius: 1px;
  }
}

<div id="box"></div>

简单版：

#box {
  position: relative;
  width: 55px;
  height: 55px;
  background: #aaa;
  margin: 0 auto;
  border-radius: 8px;
  animation-name: singleRevert;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

#box:hover {
  animation-name: singleExpend;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes singleRevert {
  0% {
    width: 400px;
    height: 40px;
  }
  50% {
    width: 55px;
    height: 40px;
  }
  100% {
    width: 55px;
    height: 55px;
  }
}
@keyframes singleExpend {
  0% {
    width: 55px;
    height: 55px;
  }
  50% {
    width: 55px;
    height: 40px;
  }
  100% {
    width: 400px;
    height: 40px;
  }
}

<div id="box"></div>

Answer 2

使用 transform 对其进行动画处理的问题在于您正在拉伸元素。因此，无论您将其设置为什么边界半径，它都会随着元素的宽度和高度一起被拉伸。 ScaleX 和 ScaleY 缩放整个元素，而不仅仅是尺寸。

在保持边界半径一致的同时为元素的大小设置动画的更好解决方案是为高度和宽度设置动画。像这样的东西会起作用：

@keyframes singleExpend {
  0% {
    width: 55px;
    height: 55px;
  }
  50% {
    width: 55px;
    height: 40px;
  }
  100% {
    width: 400px;
    height: 40px;
  }
}

祝你好运！