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

Posted 2023-03-06

【中文标题】CSS - 带有边框半径的动画比例

【英文标题】：CSS - Animation scale with border-radius

【发布时间】：2019-03-19 10:35:46

【问题描述】：

我正在制作一个带有缩放框的动画，它以 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>

【问题讨论】：

当你缩放一个元素时，它会拉伸，因此会给出这个结果。一个可能的解决方案是在缩放/动画时也将半径更改为border-radius: 1px / 8px;

【参考方案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>

【参考方案2】：

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

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

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

祝你好运！

【讨论】：

谢谢斯蒂芬！这是通过更改宽度来缩放圆形元素的唯一方法吗？当我阅读medium.com/outsystems-experts/… 时，我们最好执行变换缩放而不是修改宽度。