HTML動畫滑動效果是在網站頁面中常用的交互效果，它可以使頁面更加生動，吸引用戶的注意力。下面我們來看一個簡單的代碼示例：

/* CSS樣式部分 */
#box{
width: 300px;
height: 300px;
background-color: #ff6600;
position: relative;
}
#box:hover{
cursor: pointer;
}
#animate{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
animation: slide 2s ease-in-out forwards;
}
@keyframes slide {
0% {
left: 0;
}
100% {
left: 300px;
}
}
/* HTML部分 */
<div id="box">
<div id="animate"></div>
</div>

上述代碼中，我們首先創建了一個id為“box”的div容器，然后在該容器中創建了一個id為“animate”的子容器。在CSS樣式部分中，我們給“box”容器設置了寬高和背景色，并將其定位方式設置為相對定位。當用戶鼠標懸停在該容器上時，我們為其設置了“pointer”鼠標樣式，以提高用戶體驗。

接下來，我們為“animate”容器設置了絕對定位，并將其寬高設置為100%。然后，在“slide”動畫中，我們定義了0%和100%兩個關鍵幀，分別表示“animate”容器的初始和結束狀態。在0%狀態下，我們將其“left”屬性設置為0，而當到達100%狀態時，我們將其“left”屬性設置為300px，這樣就可以在2秒內實現從左到右的滑動效果。

最后，在HTML部分中，我們將“animate”容器作為“box”容器的子元素，這樣就可以完成整個動畫效果并呈現在頁面上了。