Автоматический текст переполнения прокрутки с CSS3

Question

У меня ограниченная область для отображения длинного текста. Он должен быть обернут эллипсисом. Когда вы наводите на нее курсор, его нужно прокручивать до конца, поэтому я придумал this, но у меня есть некоторые проблемы.

1. Это не работает в Opera Browser.

2. Он использует свойство статической ширины.

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

3. Даже текст короче; он прокручивается в статической продолжительности.

Как это решить?

EDIT: Я решил все эти проблемы с JavaScript, но чистое решение CSS3 будет по-прежнему прекрасным, потому что я ненавижу вводить правила CSS внутри моего кода JavaScript. 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; } 
}