用css3 transtion写动画

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

  html:

            蜡笔小新
            低腰裤美女
            西双版纳
            湿身写真
            穿越火线
            犀牛
            混血美女
            唯美少女
       

用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可以轻松一些了。