用css3 transtion写动画

最新工作需要给一些热搜词，加上一些淡入淡出的效果。看到这个需求，第一反应就是用jquery( zepto )的animate函数。我们产品线主要运行在移动端的，浏览器的内核几乎都是webkit。可不可以用css3来完成这。

  html:

<div class="hotqueryword hotquery">
            <span class="color8"><i>蜡笔小新</i></span>
            <span class="color6"><i>低腰裤美女</i></span>
            <span class="color3"><i>西双版纳</i></span>
            <span class="color6"><i>湿身写真</i></span>
            <span class="color8"><i>穿越火线</i></span>
            <span class="color1"><i>犀牛</i></span>
            <span class="color4"><i>混血美女</i></span>
            <span class="color1"><i>唯美少女</i></span>
        </div>

用jquery方式：

        $(".hotqueryword span").animate({
                opacity: 1,
            }, 300,"linear",function(){
                $(this).animate({
                  opacity: 0,
                },300,"linear");
            });

用css3 方法：

.hotqueryword span{ -webkit-tansition: all 0.3s linear; }
$(".hotqueryword span").css(opacity: 0);
setTimeout(function(){
  $(".hotqueryword span").css(opacity: 1);
},300);

transition 还支持很多种效果的变化，rotate，scale，translate。在webkit内核的浏览器中，css3可以完成几乎所有的动画。javascript可以轻松一些了。