如何用纯css实现弹幕效果

Question

@-webkit-keyframes barrage {
  from {
    left:100%;
    transform:translate3d(0,0,0);  
  }

  to {
    left:0;
    transform:translate3d(-100%,0,0);  
  }
}
@keyframes barrage {
  from {
    left:100%;
    transform:translate3d(0,0,0);    
  }

  to {
    left:0;
    transform:translate3d(-100%,0,0);
  }
}

想用纯css模拟弹幕效果，上面是初步的代码，结合定位做。但是问题是关键帧使用了left，性能不是很好。。求优化，求纯css更好的解决方案。

http://jiangshanmeta.github.i...

链接在上，请用手机模式打开，然后弹幕效果在屏幕下方

看渲染满屏都是绿的。。。。都懂的。。。。只想问css方案

好吧，我想明白了，再加一层div就行了

Answer 1

性能不好是怎么不好？效果不平滑还是其他意思？还有就是，你动画的启动是怎么设置的？时间多长？线性的（infinite）函数加速的？没有说清楚啊

Answer 2

.icon-wh,.icon-wh2{
    position:absolute; 
    right:0;  
    top:0; 
    width:102px;
    height: 102px;
    background:#f60;
    -webkit-animation:translateX 10s ease-out infinite;
    animation:translateX 10s ease-out infinite;
}   
/*不同时间*/    
.icon-wh2{
    top: 100px;
    width:62px;
    height: 164px;   
    -webkit-animation:translateX 5s ease-out infinite;
    animation:translateX 5s ease-out infinite;
    }    
@-webkit-keyframes translateX{
    0%{ -webkit-transform: translate3d(0,0, 0);}
    100%{-webkit-transform: translate3d(-1920px,100px,0);} 
}
@keyframes translateX{
    0%{ transform: translate3d(0, 0, 0);}
    100%{transform: translate3d(-1920px,100px,0);}
}  

Answer 3

我试过比较出名的弹幕插件jquery.danmu.js插件，基本上都存在性能问题，笔记本上甚至一开弹幕之后风扇就开始呼呼响。可能这是通病把。