大家好，本篇文章分享双子星水平位移相对动画特效，欢迎参考和指正。
效果图：
双子星水平位移相对动画特效
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基础入门开发。