如何在没有JavaScript的情况下设置CSS动画速度?

这个问题是关于CSS动画的速度的。

.div1{
    margin: 10px;
    width: 300px;
    background: #A1BDAF;
    white-space: nowrap;
    overflow: hidden;
}

.content{
    color: white;
    min-width: 100%;
    display: inline-block;

    animation: moving 4s ease-in-out forwards;
    transition: width linear;
}

@keyframes moving{

    from{
        -webkit-transform: translateX(0);
        transform: translateX(0);
        margin-left: 0;
    }

    to{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        margin-left: 100%;
    }

}
    <div class = "div1">
        <h1 class = "content">
            The only thing that matters now is everything You think of me
        </h1>
    </div>

    <div class = "div1">
        <h1 class = "content">
            I want to fix the speed of running text animation 
        </h1>
    </div>

    <div class = "div1">
        <h1 class = "content">
            regardless of the length of the text.
        </h1>
    </div>

    <div class = "div1">
        <h1 class = "content">
            Is there any way to set not duration but speed of animation
        </h1>
    </div>

    <div class = "div1">
        <h1 class = "content">
            with out JavaScript?
        </h1>
    </div>

如上所述,动画的持续时间是固定的,因此文本越短,进度越慢,反之亦然。但我想使动画速度相同。

在JavaScript中,它可以表示为

sampleDom.style.animationDuration = (sampleDom.scrollWidth) / (speed) +"s";

但是我想在没有JavaScript的CSS中编写它。

没有JavaScript的文本长度如何如何设置CSS动画速度相同?

评论