CSS 各种样式值的转换

Question

我正在努力改进 CSS 动画和过渡。我想做的是使从正方形到圆形的过渡更平滑，反之亦然。我知道我需要使用 CSS 中的 transition 方法来控制它。

2 个问题：

为什么 transition 方法在下面的代码片段中不起作用？
如何为每个变化的值创建不同的 transition 属性？即 1 个用于更改边界半径的过渡时间，1 个用于将圆移动到正方形所在位置的过渡时间等。

.container-flex {
  display: flex;
  width: 500px;
  height: 250px;
  border: 1px solid black;
  background-color: rgb(0,0,255);
  }

.circle {
  width: 200px;
  height: 200px;
  background-color: rgba(255,0,0,0.5);
  border-radius: 100px;
  transition: all 1s alternate;
  }
  
.circle:hover {
  border-radius: 0;
  }
  
.square {
  width: 200px;
  height: 200px;
  background-color: rgba(0,255,0,0.5);
  transition: all 1s alternate;
  }
  
.square:hover {
  border-radius: 100px;
  }

<html>
<body>
<div class="container-flex">
  <div class="circle"></div>
  <div class="square"></div>
</div>
</body>
</html>

Answer 1

.container-flex {
  display: flex;
  width: 500px;
  height: 250px;
  border: 1px solid black;
  background-color: rgb(0,0,255);
  }

.circle {
  width: 200px;
  height: 200px;
  background-color: rgba(255,0,0,0.5);
  border-radius: 100px;
  transition: all 1s ease;
  }
  
.circle:hover {
  border-radius: 0;
  }
  
.square {
  width: 200px;
  height: 200px;
  background-color: rgba(0,255,0,0.5);
  transition: all 1s ease;
  }
  
.square:hover {
  border-radius: 100px;
  }

<html>
<body>
<div class="container-flex">
  <div class="circle"></div>
  <div class="square"></div>
</div>
</body>
</html>

CSS 各种样式值的转换

CSS Transitions for various style values

html

javascript

css

css-transitions