所以我最近正在开发一些私人项目,因为我是一个巨大的CSS粉丝,我想用CSS而不是 JavaScript来做大部分动画. 今天我想创建这样的东西：Text moving from left to
... . . 所以我最近正在开发一些私人项目,因为我是一个巨大的CSS粉丝,我想用CSS而不是 JavaScript来做大部分动画.
今天我想创建这样的东西：
Text moving from left to right
我认为这可能适用于CSS动画.从理论上讲,我有一个div包装器,其位置为：relative,固定宽度和overflow：hidden.在里面,有一个div位置：绝对和左：0和底：0.现在在某些情况下,文本对于父div来说太长了,我想让文本文本“浮动”通过父div：实际上从左边动画div：0到右：0.
我偶然发现了一些CSS动画并试了一下
@keyframes floatText{ from { left: 0; } to { right: 0; }} 关于孩子div.当然,这没有奏效.动画如左：0到左：-100px工作,但这不能确保整个文本可见,当它比那些额外的100px更长时.是否有一个漂亮而干净的方法来完成这项工作？当然,JavaScript可能会撼动这种理想的功能.但是我想知道在纯CSS中是否有办法做到这一点.
提前致谢！
编辑：
为了清楚我的想法,我创建了一个显示我想用CSS动画实现的gif：
Animated
如你所见,我们有三种相邻的,有些名称直接适合,有些可能太长,应该是前后动画,所以用户可以阅读:)！
再次感谢！
EDIT2：
有没有办法完成这样的事情？
@keyframes floatText{ from { left: 0px; } to { left: (-this.width+parent.width)px; }} 这将是最终的解决方案,我知道这种编码在CSS中是不可能的,但也许有一些CSS3调整,如calc()或其他东西？我现在没有想法了:(
.解决方法
. 以％为单位更改关键帧值
试试这个
body{ overflow: hidden;}p{ position: absolute; white-space: nowrap; animation: floatText 5s infinite alternate ease-in-out;}@-webkit-keyframes floatText{ from { left: 00%; } to { /* left: auto; */ left: 100%; }} <p>hello text</p>. . .. ...
