CSS3 動畫是網頁設計中一個非常重要的功能，它可以為網站添加各種炫酷的效果，從而吸引網站訪客的眼球。在實現 CSS3 動畫過程中，一個非常常見的問題是在動畫執行完畢之后保留元素原來的位置。CSSLabs 這個網站提供了一種非常便捷的方法來實現這個目的。

.example {
position: relative;
}
.example::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 2px solid transparent;
border-radius: 50%;
z-index: -1;
transition: transform 0.3s ease-out;
}
.example:hover::before {
transform: scale(25);
}

在上面的例子中，我們用的是 ::before 偽元素來添加一個小圓點。我們把它定位在了元素的頂部左側，把它的 z-index 設置為 -1，這樣就保證圓點不會遮蓋住元素。正如我們平時使用的 :hover 偽類一樣，我們給 .example 元素添加了一些樣式，使得鼠標經過時圓點變大。通過這種方法，我們不僅可以實現一個非常炫酷的動畫，還能夠保留元素原來的位置。

總之，在做 CSS3 動畫時，我們需要保證元素不會因為動畫而發生位置偏移。執行動畫后，我們要保持元素的位置不變，這樣就能讓我們的網頁看起來更加專業。