動畫CSS 網格佈局屬性
儘管CSS 網格佈局規範指示過渡應應用於grid-template-columns 和grid-template -rows，目前在大多數情況下不起作用瀏覽器。
目前實作：
Firefox支援動畫網格屬性，並提供了範例這裡：
https://codepen.io/matuzo/post/animating-css-grid-layout-properties
警告：
網格結構不能在對行和列尺寸進行動畫處理時進行更改。例如，新增或刪除行會破壞動畫。
測試程式碼：
考慮以下測試：
grid-container {
display: inline-grid;
grid-template-columns: 100px 20vw 200px;
grid-template-rows: repeat(2, 100px);
background-color: black;
height: 230px;
transition: 2s;
}
grid-container:hover {
grid-template-columns: 50px 10vw 100px;
grid-template-rows: repeat(2, 50px);
background-color: red;
height: 130px;
transition: 2s;
}
grid-item {
background-color: lightgreen;
}<grid-container> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <!-- Additional items --> </grid-container>
注意：此範例中的測試程式碼包含在HTML 註解中，以便正確顯示。
以上是CSS 網格佈局屬性可以設定動畫嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
