CSS自動上下翻轉動畫在網頁設計中非常實用，可以增加網頁的視覺效果和交互動感。下面介紹如何使用CSS實現自動上下翻轉動畫。

.flip-container {
perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
}

以上代碼中，首先使用perspective屬性設置元素的透視效果，使得元素在旋轉時有深度感。然后使用rotateY屬性將元素旋轉180度，實現翻轉效果。

要實現自動上下翻轉動畫，可以使用:hover偽類和JavaScript來觸發CSS動畫。例如，可以使用jQuery庫實現以下代碼：

$(document).ready(function() {
$('.flip-container').mouseenter(function() {
$(this).addClass('hover');
});
$('.flip-container').mouseleave(function() {
$(this).removeClass('hover');
});
});

以上代碼中，當鼠標懸停在flip-container元素上時，添加hover類，觸發CSS動畫。當鼠標移開時，移除hover類，回到原始狀態。

使用CSS自動上下翻轉動畫可以滿足用戶對于網站設計的美感要求，同時也可以提高用戶體驗，增加網站的互動性。