cssでhtmlのmarqueeタグの動きをさせたい時、文字数が変わっても一定速度という指定はできないのでしょうか。

Question

ブラウザはchrome限定です。
cssだけで文字数が変わっても一定速度で、懐かしの電光掲示板表示をしたいと考えております。
昔は<marquee scrollamount="">で速度の指定が出来た気がします。
<marquee>はもう使わない という事なのでcssで考えていますが……

<?php
//仮に…
$weatherOverview='【関東甲信地方】関東甲信地方は、晴れや曇りとなっています。
２日は、高気圧に覆われますが、上空の気圧の谷や前線の影響を受けるため、晴れますが次第に曇りとなり、甲信地方
では夕方から雨の降る所がある見込みです。…';
?>

<div class="area">
    <div class="marquee">
        <?php echo $weatherOverview; ?>
    </div>
</div>

.area {
  width: 400px;
  border: 1px solid black;
  overflow :hidden;
}
.marquee {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: scrollAnime 20s linear infinite;　//20sec.
}
@keyframes scrollAnime {
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}

これでは『1回のマーキーにかかる所要時間が20秒』となり総文字数によってマーキーの速度が変化してしまいます。
marquee-speed:slow;などはもう使えない事は確認しました。

cssでは駄目ということなら素直にJavaScriptでの方法を勉強するのですが…。
お忙しいところ恐縮ですが宜しくお願い致します。

Answer 1

CSSで行うのはもう諦めました。

jQuery の Marqueeプラグインを試しました。が、長文で途切れるなど動作が安定しなかったため、もう本当に<marruee>タグにしようかと折れそうになった時に coolcarousel News Tickers を見つけました。これを利用させていただくことで解決しました。