JS实现匀速与减速缓慢运动的动画效果封装示例

本文实例讲述了JS实现匀速与减速缓慢运动的动画效果。分享给大家供大家参考，具体如下：

  
  
  
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-top: 10px;
      position: relative;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 10px;
      position: relative;
    }
  


匀速移动
减速移动

这里使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下运行效果：

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript运动效果与技巧汇总》、《Javascript切换特效与技巧总结》、《Javascript查找算法技巧总结》、《Javascript动画特效与技巧汇总》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。