CSS3的animation和transform写的动画和JS的动画对比

JavaScript实现的轮播的例子是这样的js完整代码如下：

<script>
        var ul = document.getElementsByClassName('tuul')[0];
        var li = document.querySelectorAll(".dian ul li");
        console.log(li);
        var main = document.getElementsByClassName('main')[0];
        var num = ul.children.length;
        console.log(num);
        var chang = ul.children[0].clientWidth;
        var timer;
        var t;
        //重复移动事件
        t = setInterval(function () {
            Move(ul, ul.offsetLeft - chang, function () {
                if (ul.offsetLeft >= -(num - 1) * chang) {
                    ul.style.left = '0px';
                }
            });
        }, 2000)

        //移动事件
        function Move(ele, target, callback) {
            clearInterval(timer);
            timer = setInterval(function () {

                var iSpeed = (target - ele.offsetLeft) / 7;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                ele.style.left = ele.offsetLeft + iSpeed + 'px';

                if (ele.offsetLeft == target) {
                    clearInterval(timer);
                    typeof callback == 'function' && callback();
                }
            }, 30)
            
        for (let i = 0; i < li.length; i++) {
           li[i].onmouseover  = function () {
             clearInterval(t)
             clearInterval(timer)
             this.style.color="#f40";
             Move(ul, - i * chang, function () {
                if (ul.offsetLeft >= -(num - 1) * chang) {
                   ul.style.left = '0px';
               }
                        
           })
         }
       }
    }
    //鼠标移出div时的事件
    main.onmouseout = function () {
      clearInterval(t)
      t = setInterval(function () {
      Move(ul, ul.offsetLeft - chang, function () {
          if (ul.offsetLeft == -(num - 1) * chang) {
              ul.style.left = '0px';
         }
      });
   }, 2000)
}
</script>

用纯CSS3实现的轮播代码：

/*css reset start*/
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
/*css reset end*/

/*css public start*/
.floatfix {
*zoom: 1;
}
.floatfix:after {
content: "";
display: table;
clear: both;
}
/*css public end*/

/*slider start*/
.slider-contaner{
width:100%;
position:relative;
}
.slider-item + .slider-item{
opacity:0;
}
.slider-item{
width:100%;
position:absolute;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
background-size:100%;
}
.focus-container{
position:absolute;
z-index:7;
margin:0 auto;
left:0;
right:0;
}
.focus-container li{
width:10px;
height:10px;
border-radius:50%;
float:left;
margin-right:10px;
background:#fff;
}
.focus-item{
width:100%;
height:100%;
border-radius:inherit;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
}
.focus-item2,.focus-item3,.focus-item4,.focus-item5{
opacity:0;
}
.focus-container ul{
margin-left:46%;
}
/*设置轮播焦点的位置*/
.focus-container{
bottom:2%;
}
/*设置当前图片焦点的颜色*/
.focus-item{
background:#51B1D9;
}
/*设置动画，请根据实际需要修改秒数*/
.slider-item,.focus-item{
animation-duration: 20s;
}
.slider-item1,.focus-item1{
animation-delay: -1s;
}
.slider-item2,.focus-item2{
animation-delay: 3s;
}
.slider-item3,.focus-item3{
animation-delay: 7s;
}
.slider-item4,.focus-item4{
animation-delay: 11s;
}
.slider-item5,.focus-item5{
animation-delay: 15s;
}
@keyframes fade{
0%{
opacity:0;
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:0;
z-index:0;
}
100%{
opacity:0;
z-index:0;
}
}
/*设置背景，响应式请利用媒体查询根据断点修改路径*/
.slider-item1{
background-image:url(imgs/1.jpg);
}
.slider-item2{
background-image:url(imgs/2.jpg);
}
.slider-item3{
background-image:url(imgs/3.jpg);
}
.slider-item4{
background-image:url(imgs/4.jpg);
}
.slider-item5{
background-image:url(imgs/5.jpg);
}
/*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
.slider,.slider-item{
padding-bottom:40%;
}

JS和CSS3上面新增的属性的区别和使用场景：

他们两个区别就是，JS是可以动态在页面上加上标签和图片甚至其他的元素，而CSS3实现的则需要在页面上有这个元素或者元素上面有选择器的名字，例如：ID选择器的名字、Class选择器的名字等等。但是CSS3上面的属性也不是没有用的，就是实现一些小的动画效果的时候很有用，一些小动画不可能去使用js语法吧，这样的话就会是页面的负荷就大了，这样页面的加载速度就会变慢，所有在写一些大的动画效果的时候最好是使用js，而写一些小动画的时候就使用CSS3上面的animation和transform还有transition这个属性，就比如说transform上面的放大的效果和旋转的效果不可能用一个单独的js文件写来实现吧，并且使用transform的同样也减少了代码量，这也是所有程序员想要的。
还要在很多的商务网站上面有的或使用CSS3上面的旋转和动画来实现一些小的功能，而一些需要轮播的地方好多人会选择去使用JS来实现的。