[分享]css3平移动画源代码

CSS3中的平移动画效果可以通过使用transform和transition属性来实现。其中，transform属性允许我们在平面上移动元素，而transition属性则控制这个过程的动画过渡效果。移...

CSS3中的平移动画效果可以通过使用transform和transition属性来实现。其中，transform属性允许我们在平面上移动元素，而transition属性则控制这个过程的动画过渡效果。

移动元素的CSS代码：

transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari and Chrome */
-o-transform: translate(50px, 100px); /* Opera */
-moz-transform: translate(50px, 100px); /* Firefox */

其中，translate()函数的第一个参数表示元素在水平方向上的位移量，第二个参数表示元素在垂直方向上的位移量。

动画效果的CSS代码：

transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; /* Firefox 4 */
-webkit-transition: all 1s ease-in-out; /* Safari 和 Chrome */
-o-transition: all 1s ease-in-out; /* Opera */

其中，transition属性包含四个值：属性值、过渡时间、时间函数、延迟时间（可选）。这里我们设置它对所有属性生效，过渡时间为1秒，时间函数为ease-in-out，表示动画效果从加速到减速。

最终的CSS代码为：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(50px, 100px);
  -ms-transform: translate(50px, 100px);
  -webkit-transform: translate(50px, 100px);
  -o-transform: translate(50px, 100px);
  -moz-transform: translate(50px, 100px);
  transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
} 

使用以上代码，我们可以在HTML文档中添加一个class为“box”的元素，并在JavaScript中使用它的style属性来控制它的平移动画。例如：

<div class="box"></div>

// JavaScript代码，加入html页面的script标签中
var box = document.querySelector('.box');
box.style.transform = 'translate(100px, 200px)'; 

以上，我们用CSS3实现了一个平移动画效果并在JavaScript中实现了对其的控制。注：浏览器兼容性问题可用Autoprefixer自动添加前缀。