隐藏溢出的 div 容器中从左到右的 CSS 动画文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33068754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Animate text from left to right in div container with overflow hidden
提问by SunTastic
So i've recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript.
所以我最近在做一些私人项目，因为我是一个巨大的 CSS 粉丝，所以我想用 CSS 而不是 JavaScript 来制作大部分动画。
Today i wanted to create something like this: Text moving from left to right
今天我想创建这样的东西： 文本从左到右移动
I think this might be possible with CSS Animations. In theory, I have a div wrapper with position:relative, a fixed width and overflow:hidden. Inside, there is a div with position:absolute and left:0 and bottom:0. Now in some cases, the text is too long for the parent div, and i wanted to let text text "float" though the parent div: actually animating the div from left:0 to right:0.
我认为这可能通过 CSS 动画实现。理论上，我有一个带有位置：相对、固定宽度和溢出：隐藏的 div 包装器。在里面，有一个带有 position:absolute 和 left:0 和 bottom:0 的 div。现在在某些情况下，文本对于父 div 来说太长了，我想让文本文本通过父 div“浮动”：实际上是从左：0 到右：0 对 div 进行动画处理。
I stumbled upon some CSS Animations and tried this
我偶然发现了一些 CSS 动画并尝试了这个
@keyframes floatText{
from {
left: 0;
}
to {
right: 0;
}
}
on the child div. And of course this didn't worked. Animations like from left :0 to left: -100px work, but this doesn't ensure that the whole text is visible, when it is longer than those additional 100px. Is there a nice and clean way to make this work? Surely JavaScript might rock this desired functionality. But I'd wanted to know if there is a way to do this in pure CSS.
在子 div 上。当然这没有用。像从 left :0 到 left: -100px 这样的动画可以工作，但是当它比那些额外的 100px 长时，这并不能确保整个文本都是可见的。有没有一种漂亮而干净的方法来完成这项工作？当然，JavaScript 可能会撼动这个所需的功能。但我想知道是否有办法在纯 CSS 中做到这一点。
Thanks in advance!
提前致谢！
EDIT:
编辑：
To clearify what I have in my mind, i've created a gif displaying what i want to accomplish with CSS animations: Animated
为了弄清楚我的想法，我创建了一个 gif 显示我想用 CSS 动画完成的事情： 动画
As you see, we have three of that kind next to each other, some have a name which fits directly, some others might be too long and should be animated forth and back, so the user can read it :)!
正如你所看到的，我们有三个这样的相邻，一些有一个直接适合的名字，一些可能太长，应该前后动画，所以用户可以阅读:)！
Thanks again!
再次感谢！
EDIT2:
编辑2：
Is there a way to accomplish something like this?
有没有办法完成这样的事情？
@keyframes floatText{
from {
left: 0px;
}
to {
left: (-this.width+parent.width)px;
}
}
This would be the ultimate solution, I know that this kind of coding is not possible in CSS, but maybe with some CSS3 tweaks like calc() or something? I'm out of ideas now :(
这将是最终的解决方案，我知道这种编码在 CSS 中是不可能的，但也许需要一些 CSS3 调整，比如 calc() 或其他什么？我现在没有想法了:(
回答by SunTastic
change your keyframe value in %
更改您的关键帧值 %
Try This
尝试这个
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>回答by Josef Wittmann
There is a solution using CSS translate.
有一个使用 CSS 的解决方案translate。
Make sure your text's displayproperty is NOTinline.
确保您的文本display属性不是inline。
When you want to stop when you're done on the right, then translate the box by using left. The trick is that translate's percentages are corresponding to the current element and leftreferrs to the parent.
当您在右侧完成后想停止时，请使用 翻译框left。诀窍是 thattranslate的百分比对应于当前元素并left引用父元素。
The only downside is that shorter texts also get animated. To counter that consider JS or making your parent element match size by using display: inline-blockand max-width(which can lead to minimal wiggling by the animation).
唯一的缺点是较短的文本也会变得动画。为了解决这个问题，请考虑使用 JS 或通过使用display: inline-block和使您的父元素匹配大小max-width（这可能会导致动画的摆动最小）。
div {
width: 5rem;
white-space: nowrap;
overflow: hidden;
border: 0.1rem solid black;
margin: 1rem;
}
span {
display: inline-block;
animation: 3s linear 0s infinite alternate animate;
}
.advanced {
position: relative;
animation: 3s linear 0s infinite alternate advanced;
}
@keyframes animate {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
@keyframes advanced {
0%, 25% {
transform: translateX(0%);
left: 0%;
}
75%,
100% {
transform: translateX(-100%);
left: 100%;
}
}<div>
<span>Shortname</span>
</div>
<div>
<span>Some more text</span>
</div>
<div>
<span>A really long text to scroll through</span>
</div>
<div>
<span class="advanced">Shortname</span>
</div>
<div>
<span class="advanced">Some more text</span>
</div>
<div>
<span class="advanced">A really long text to scroll through</span>
</div>回答by Himesh Aadeshara
hi dude i have tried this
嗨，伙计，我试过这个
Note :but you will find one thing is missing and will see that animation will not reach to the purely left and right i mean you can't see the whole text of the div.
and that is due to the value of the leftand righti have set to the -100and 100so because i couldn't find the alternative for that so
right now trying to see that how can you make this happen.
注意：但是您会发现缺少一件事，并且会看到动画不会完全到达左右，我的意思是您看不到 div 的整个文本。
那是由于价值左和右我已经设置为-100和100，因为我无法找到替代的，如此
现在试图看看你怎么能做到这一点。
and here is my try
这是我的尝试
div.main_div{
margin:0;
padding:0;
width: 20%;
height: 60%;
background-color:grey;
position:absolute;
overflow: hidden;
}
div.transparent_div{
width:100%;
height:50px;
bottom:0;
background:red;
position:absolute;
}
div.text_wrapper{
height:50px;
bottom:0;
z-index:10;
background:transparent;
white-space: nowrap;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
color:white;
font-size:2em;
vertical-align: middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
position:absolute;
-webkit-animation: anim 1.5s infinite;
animation: anim 1.5s infinite;
animation-direction: alternate-reverse;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
@-webkit-keyframes anim {
from {
left: -100%;
}
to {
left:100%;
}
}
@keyframes anim {
from {
left: -100%;
}
to {
left:100%;
}
}<body>
<div class="main_div">
<div class="text_wrapper">Hiii i am going right to left infinete times and here are the news
</div>
<div class="transparent_div"></div>
</div>
</body>and here you can check out the demo of the above working code
在这里您可以查看上述工作代码的演示
回答by damiano celent
Add ease-in-out to the animation for smoothness, and use % instead of px to move it left or right.
为动画添加缓入缓出以提高平滑度，并使用 % 而不是 px 将其向左或向右移动。
