html - 使用 CSS3 自动滚动溢出文本

Question

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

1. 它不适用于 Opera 浏览器。

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; }
}