CSS動畫，是一種讓網站更加生動和有趣的方式。我們可以利用CSS動畫來改變元素的形狀，大小，背景顏色，同時在動畫期間改變元素的屬性。除此之外，我們還可以利用CSS來控制元素的動畫，使它只有在特定狀態下才會發生。
在這篇文章中，我們將介紹如何用CSS動畫來觸發其他元素的動畫。在這里我們用到了CSS3的transition屬性和selecter property。使用這些屬性和方法來構建CSS動畫將使我們的網站更加生動和動態。
首先，我們需要把觸發動畫的元素設置為“hover”狀態。我們可以通過給元素設置:hover選擇器來實現這一點。例如：
pre{
background-color: lightgrey;
}
pre:hover{
background-color: #dddddd;
}
在上面的代碼中，我們將pre元素的背景顏色設置為灰色，同時當我們鼠標滑動到這個元素上時，背景顏色將變為淡灰色。這種效果非常簡單，但真正引人注目并能夠增加網站交互性的是，它能夠觸發其他元素的動畫。
要實現這個，我們需要將要控制的元素設置為:hover之后的狀態。例如，我們可以將一個元素從一個大小變化到另一個大小，并在:hover狀態下使其變大。代碼如下：
pre{
background-color: #d9d9d9;
transition: width 0.5s ease-in-out;
}
pre:hover{
background-color: #bfbfbf;
width: 500px;
}
在上述代碼中，在非:hover狀態下，pre元素的背景顏色為#d9d9d9，動畫效果為水平拉伸。在:hover狀態下，背景顏色變為#bfbfbf，同時“width”屬性變為500像素，使元素變得更大。
最后，我們可以在:hover狀態下更改多個元素的屬性。例如：
pre{
background-color: #d9d9d9;
transition: all 0.5s ease-in-out;
width: 200px;
height: 200px;
}
pre:hover{
background-color: #bfbfbf;
width: 500px;
height: 500px;
}
在上面的代碼中，在非:hover狀態下，預設元素的背景顏色為#d9d9d9，同時將其大小設為200像素。在:hover狀態下，背景顏色變為#bfbfbf，同時將元素的寬度和高度變為500像素，效果更加突出。
總之，我們可以利用CSS動畫來改變元素的形態、大小、顏色等屬性，同時在動畫的過程中改變元素的屬性。如果您想制作更加出色的動態元素，不妨嘗試在:hover狀態下控制其他元素的動畫。