CSS3動畫是前端開發中非常重要的一個技術，它可以為網站增加更加生動的視覺效果。但是，很多前端開發者在學習CSS3動畫時遇到了很多問題，尤其是在考試中更是如此。接下來，我們將為大家介紹一道關于CSS3動畫的考題。

下面的代碼展示了如何使用CSS3動畫使一個div從左側延伸到右側。請補充代碼，使動畫完成后div恢復到原狀。
@keyframes stretch {
from {
width: 0px;
}
to {
width: 100%;
}
}
div {
width: 100px;
height: 100px;
background-color: #f00;
animation: stretch 2s ease-out forwards;
/*請在此處補充代碼*/ 
}

以上代碼中，我們定義了一個名為stretch的關鍵幀動畫，運用該動畫將會使一個元素的寬度從0逐漸變為100%。接著，我們為div添加了該動畫，并在動畫結束后使div保持在變形后的狀態。這些都足以使該div從左側向右側延伸，但在動畫結束后，div將會停留在變形的狀態。因此，我們需要添加一行代碼讓div在動畫結束后恢復原狀。

div {
width: 100px;
height: 100px;
background-color: #f00;
animation: stretch 2s ease-out forwards;
animation-fill-mode: forwards; 
}

在以上代碼中，我們添加了一行animation-fill-mode屬性，將該屬性設置為forwards。這一屬性將會使動畫結束后div停留在變形的狀態。由于我們希望div在動畫結束后恢復原狀，所以我們需要再添加一行代碼，讓div在動畫結束后立即返回原狀。

div {
width: 100px;
height: 100px;
background-color: #f00;
animation: stretch 2s ease-out forwards;
animation-fill-mode: forwards;
animation-direction: alternate-reverse;
}

在以上代碼中，我們添加了一行animation-direction屬性，將該屬性設置為alternate-reverse。這一屬性將會使動畫結束后div反轉回到原狀。這樣，我們就成功補充完了該程序中的代碼。