CSS動畫嵌套可以讓你在一個動畫里面加入其他小的動畫元素，使動畫更加豐富和生動。具體方法如下：

.animation {
width: 100px;
height: 100px;
animation: rotate-scale 3s ease-in-out infinite;
}
@keyframes rotate-scale {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.5);
}
100% {
transform: rotate(360deg) scale(1);
}
}
.animation .inner {
width: 50px;
height: 50px;
background-color: red;
animation: move 1s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(0px);
}
}

如上代碼所示，我們首先定義了一個名為.animation的div，將其寬高定義為100px，并且加入了一個名為rotate-scale的動畫，該動畫會讓div不停旋轉并縮放。

接下來，我們在.animation中添加了一個名為inner的div，將其寬高定義為50px，并且背景顏色為紅色。并且在inner中加入了一個名為move的動畫，該動畫會讓inner不停在X軸上移動。

通過這樣的嵌套，我們可以讓outer動畫和inner動畫同時進行，外層動畫控制旋轉縮放，內層動畫控制平移。使得整個動畫更生動有趣。