如何为覆盖全屏宽度但不溢出的元素设置动画

Question

我在p元素上应用了一些动画，并希望制作一个类似于效果的效果，它们会动画但它们会离开屏幕或溢出。

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

我必须在translateX(screen_width)内定义屏幕宽度才能产生这种效果。

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

My fiddle of animation

你有什么想法，我如何在没有JavaScript的情况下完成这项任务？

我在问题中添加了JavaScript标记只是为了引起注意，如果有任何编剧知道Css 3

Answer 1

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

<强> jsFiddle

在<span>和<p>之间设置left: 0内的left: 100%位置，同时使用翻译将<span>的全长移至左侧，{ {1}}。由于元素将相对于其最近的父元素定位，因此您需要为translate(-100%)指定position: relative，为<p>指定position: absolute

<span>仅用于确保 保留其高度，即使<p>内有<span>

CSS动画

position: absolute

@-webkit-keyframes move { 100% { left: 0; } 0% { left: 100%; -webkit-transform: translate(-100%); } } 的CSS和文字

<p>

HTML for text

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;
}