大家好，本篇文章分享雙子星水平位移相對動畫特效，歡迎參考和指正。
效果圖：
雙子星水平位移相對動畫特效
HTML代碼：
CSS代碼：
<style><br> .tui-demo-6 {<br> width: 100px;<br> height: 100px;<br> margin: 50px auto;<br> position: relative;<br> }<br> .tui-demo-6:before,.tui-demo-6:after {<br> content: "";<br> height: 30px;<br> width: 30px;<br> border-radius: 50%;<br> position: absolute;<br> top: 0;<br> left: 0;<br> animation: tui-demo-6 1.6s ease-in-out infinite;<br> }<br> .tui-demo-6:before {<br> background: #FF5722;<br> animation-delay: -0.8s;<br> }<br> .tui-demo-6:after {<br> background: #FFB800;<br> }<br> @keyframes tui-demo-6 {<br> 0% {<br> transform: translateX(70px);<br> }<br> 50% {<br> transform: translateX(0);<br> }<br> 100% {<br> transform: translateX(70px);<br> }<br> }<br>/<style>
知識點：
animation：是CSS3的動畫屬性，這裡把animation綁定到tui-demo-6元素上，並指定該動畫需要1.6秒完成，ease-in-out則表示動畫以低速開始和結束，infinite則表示無限次播放該動畫。
@keyframes：該規則表示動畫可以逐步從一個CSS樣式改變為另一個CSS樣式。這裡0％是動畫開頭，100％是動畫結束。
transform：該屬性應用於2D元素或3D元素的轉換，允許元素髮生旋轉，縮放，移動，傾斜等效果。translateX表示元素沿著水平方向或者X軸移動。
最後注意下瀏覽器兼容問題，-webkit-,-ms-或-moz-，有問題可以留言，大家一起學習HTML+CSS基礎入門開發。