Javascript 如何设置覆盖全屏且不溢出的元素的动画

我在

p

元素上应用了一些动画，并希望制作一个类似字幕的效果，虽然它们会有一些动画效果，但它们会超出屏幕或溢出

我搜索了很多，但没有找到确切的，只有Css3

我必须在

translateX（屏幕宽度）

中定义屏幕宽度才能产生这种效果

-webkit-transform: translateX(100%);  // Now i am using but fails

你知道我如何在没有JavaScript的情况下完成这项任务吗

---

我在我的问题中添加

JavaScript

标签只是为了引起注意，如果任何编剧知道

css3

你可以这样做。它可能有点过于复杂，但它是纯HTML和CSS

通过在

左：0

和

左：100%

之间的

内设置
位置动画，同时使用translate将
的全长向左移动，
translate（-100%）
。由于元素将相对于其最近的父元素进行定位，您需要为
指定
位置：相对
，为
指定
位置：绝对

仅用于确保
保持其高度，即使
内部有
位置：绝对

CSS动画

@-webkit-keyframes move {
    100% {
        left: 0;
    }
    0% {
        left: 100%;
        -webkit-transform: translate(-100%);
    }
}

用于
和文本的CSS

p {
    margin:5px;
    position: relative;
}
span {
    position: absolute;
}
p:nth-child(1) {
    color:red;
    font-size:100px;    
}
p:nth-child(1) span {
    -webkit-animation: move 2s cubic-bezier(.47, .49, .47, .49) infinite alternate;
}

<div id='bgcont'>
    <p>
        &nbsp;<span>Gnome</span>
    </p>
    <p>
        &nbsp;<span>Testfile</span>
    </p>
    <p>
        &nbsp;<span>Myfilenew</span>
    </p>
    <p>
        &nbsp;<span>Textshadow</span>
    </p>
</div>

用于文本的HTML

p {
    margin:5px;
    position: relative;
}
span {
    position: absolute;
}
p:nth-child(1) {
    color:red;
    font-size:100px;    
}
p:nth-child(1) span {
    -webkit-animation: move 2s cubic-bezier(.47, .49, .47, .49) infinite alternate;
}

<div id='bgcont'>
    <p>
        &nbsp;<span>Gnome</span>
    </p>
    <p>
        &nbsp;<span>Testfile</span>
    </p>
    <p>
        &nbsp;<span>Myfilenew</span>
    </p>
    <p>
        &nbsp;<span>Textshadow</span>
    </p>
</div>



侏儒


测试文件


Myfilenew


文本阴影

@AshishMishra我更新了我的答案，试图解释它是如何工作的