css speed,CSS animation based on speed and not time?

I have the following CSS animation:

.wrapper {

position: absolute;

top: 100%;

left: 50%;

width: 400px;

margin-left: -200px;

font: 300 30px/1 'Open Sans Condensed', sans-serif;

text-align: center;

text-transform: uppercase;

color: #fff;

animation: 60s credits linear;

}

@keyframes credits {

0% {

top: 100%;

}

100% {

top: 0px;

transform: translateY(-110%);

}

}

I need to change this to go based on 'speed' rather than 'time'.

The content I am animating can change in size by over 1000%. Animating the content in a small size can make it scroll very slow. The opposite is true.

Can anyone think of any solutions I may have looked over?