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过渡

1 个答案: