Does this have to be dynamic? Meaning, do you already know the new speed, or is it calculated by your JS? If you know the speed you wish to change to, your better bet (I think) is to setup two classes, and swap between them as you need (rather than attempt to modify the webkit-animation property directly)
@-webkit-keyframes slideright {
from { background-position: left; }
to { background-position: right; }
}
.row {
width: 200%;
height: 100px;
-webkit-animation: slide 100s linear infinite;
}
.row.new {
-webkit-animation: slide 50s linear infinite;
width: 200%; /* change other properties if needed */
}
.row.row-1 {
background-image: url(row/1.png);
-webkit-animation-name: slideright;
}
And your jQuery:
$('.row').addClass("new");