使用CSS3自动滚动溢出文本

Question

我有一个有限的区域来显示长文本。它应该用省略号包裹。当你将它鼠标悬停在它上面时，它应该滚动到它结束，所以我提出了this，但是我遇到了一些问题。

1. 它在Opera Browser上不起作用。

2. 它使用静态宽度属性。

   div.content:hover {
   
      width:742px;
   
   }
   

3. 即使文字较短;它以静态持续时间滚动。

我该如何解决这个问题？

编辑：我用JavaScript解决了所有这些问题，但纯CSS3解决方案仍然很棒，因为我讨厌在我的JavaScript代码中注入CSS规则。 http://fiddle.jshell.net/tU43F/18/

Answer 1

用这个测试:(你可以在你想要的动画中修改正确的属性）

div.content:hover {
    -webkit-animation: slide 5.0s linear;
    -moz-animation: slide 5.0s linear;
    -o-animation: slide 5.0s linear;
    animation: slide 5.0s linear;
    width:742px;
    right:0px;
    text-overflow: clip;
}

@-webkit-keyframes slide {
    0% { right:-665px;}
    50% { right:-340px;}
    100% { right:-0px; }
}

@-moz-keyframes slide {
    0% { right:-665px;}
    50% { right:-340px;}
    100% { right:-0px; }
}

@-o-keyframes slide {
    0% { right:-665px;}
    50% { right:-340px;}
    100% { right:-0px; }
}

@-khtml-keyframes slide {
    0% { right:-665px;}
    50% { right:-340px;}
    100% { right:-0px; }
}

@keyframes slide {
    0% { right:-665px;}
    50% { right:-340px;}
    100% { right:-0px; }
}