如何使用純CSS3實現一個沙漏動畫

要實現一個沙漏動畫，我們首先需要實現一個漏斗的幾何形狀。

漏斗圖形

我們接着把漏斗拆分成3個簡單圖形：一個三角形，一個倒置三角形和中間的管道（垂直線）。

那麼問題就簡化爲實現三角形和直線。

要實現三角形很簡單，有模式可套用。

即使用零寬高的元素，設置1條邊帶顏色，相交的2條邊爲透明。這主要利用了顏色渲染區域在邊界交接處按對角線平分的規則。

#bottom {
    border-right: 20px solid transparent;
    border-bottom: 20px solid #f57323;
    border-left: 20px solid transparent;
    height: 0px;
    width: 1px;
}

注意上面的width屬性不是0而是1px，這是因爲我們實際上需要的是帶一點點禿頂的三角形（梯形），所以我們把width設置成1px。

同樣我們可以實現一個倒置的三角形：

#top {
    border-top: 20px solid #f57323;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    height: 0px;
    width: 1px;
}

接着我們同樣利用帶一條邊的元素來創建一根垂直線：

#line {
    border-left: 1px solid #f57323;
    height: 0px;
    width: 0px;
    position: absolute;
    top: 20px;
    left: 20px;
}

這樣一個靜態的漏斗就創建好了，如下所示：

添加動畫

現在我們來給漏斗添加動畫，漏斗的整個過程可以分解爲3個動畫：頂部變小、底部變大以及一個倒置（重來）。

前兩者可以使用transform: scale方法，後者使用transform: rotate方法。另外我們給兩個三角形設置變換原點爲底邊中心點處。

#top,#bottom{
  transform-origin: 50% 100%; //設置變換原點爲底邊中心點處
}
#bottom{
  transform: scale(0); //設置底三角形初始爲0
}
@keyframes top {
    100% {
        transform: scale(0); //頂三角形從1到0
    }
}
@keyframes bottom {
    100% {
        transform: scale(1); //底三角形從0到1
    }
}
@keyframes loader { //整個倒轉
    99% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}