CSS動畫可以讓網頁更加生動有趣，但如果元素的寬高是未知的，該怎么使用CSS動畫呢？

在實現CSS動畫的過程中，我們通常需要確定元素的寬高，這樣才可以針對具體的尺寸進行動畫設計。但如果元素的寬高是未知的，我們該怎么辦呢？下面我們將介紹一些應對未知寬高的CSS動畫技巧。

/* 例1：使用transform進行動畫 */
.box {
position: relative;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 100%; /* 設置padding來實現寬高比例 */
background-color: #f00;
transition: transform .5s ease;
}
.box:hover::before {
transform: scale(1.5);
}

在這個例子中，我們使用了偽元素來實現效果。由于是絕對定位的元素，所以不需要考慮寬高的問題。在偽元素上設置寬高比例，然后使用transform進行縮放，在:hover時執行動畫。這種技巧適用于元素的寬高比例是已知的情況。

/* 例2：使用偽元素撐開父元素 */
.box {
position: relative;
}
.box::before {
content: "";
display: block;
padding-top: 100%; /* 設置padding來實現寬高比例 */
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #f00;
opacity: 0;
transition: opacity .5s ease;
}
.box:hover .content {
opacity: 1;
}

在這個例子中，我們使用了偽元素來撐開box元素的高度。然后通過絕對定位的方式，將content元素定位到box元素的位置。由于content元素是絕對定位的，所以寬高也不需要考慮。使用opacity來實現漸變效果，并在:hover時觸發動畫。

這些技巧只是針對未知寬高的一些解決方案，實際應用中還需要根據具體情況進行調整。但這些技巧可以為我們在使用CSS動畫時提供一些啟示，讓我們能夠更加靈活地應對不同的情況。