HTML
<html>
<head>
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>
CSS使用以下CSS规则：
.container {
display: grid;
grid-template-columns: repeat(10, 40px);
grid-template-rows: repeat(10, 40px);
column-gap: 10px;
row-gap: 10px;
}
.square {
grid-row: 5 / 8;
grid-column: 4 / 8;
transition: all 5s ease;
}
.square:hover {
grid-row: 2 / 6;
grid-column: 2 / 6;
}
代码不起作用，方形div正在更改网格行和网格列，但没有转换效果，而网格正在更改。
问题是，grid-row和grid-column不可设置动画。
在mdnweb文档中，有一个可设置动画的CSS属性列表。