我在理解 CSS 转换时遇到了困难，即使我认为显而易见的应该有效，但事实并非如此。我想要完成的事情比这有点复杂，但这个简单的例子表明我认为我还不明白 CSS 过渡是如何工作的。
我希望容器的
flex-directioncolumnrow<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
.container {
margin: 0 auto;
width: 500px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background-color: teal;
transition: flex-direction 5s ease;
}
.box {
width: 100px;
height: 100px;
background-color: dodgerblue;
}
.container:hover {
flex-direction: row;
}
谢谢你。
并非所有内容都可以动画化。我确信您知道您无法对显示属性进行动画处理，弯曲方向也是如此，它不可进行动画处理。