html - Auto scroll overflow text with CSS3 -

i have limited area show long text. should wrapped ellipsis. when mouse on it, should scrolled until end of came this have problems.

1. it doesn't work on opera browser.

2. it uses static width property.

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

3. even text shorter; scrolls in static duration.

how can solve this?

edit: solved these problems javascript pure css3 solution still great because hate injecting css rules inside of javascript code. http://fiddle.jshell.net/tu43f/18/

test : (u can modify right attributes in animation same u want)

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