用CSS3自動滾動溢出文本

Question

我有一個有限的區域來顯示長文本。它應該用省略號包裝。當你將鼠標移到它上面時，它應該滾動直到它結束，所以我想出了this，但我有一些問題。

1. 它不適用於Opera瀏覽器。

2. 它使用靜態寬度屬性。

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

3. 即使文本較短;它在一個靜態持續時間內滾動。

我該如何解決這個問題？

編輯：我用JavaScript解決了所有這些問題，但純粹的CSS3解決方案仍然很棒，因爲我討厭在我的JavaScript代碼中注入CSS規則。 http://fiddle.jshell.net/tU43F/18/

Answer 1

測試這一點：（U可以修改權屬性動畫一樣ü希望）

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