css3动画实现滚动字，类似航班信息，超出滚动，不超出不滚动
文字走马灯，手机的弹幕等等。
js可以动态的计算宽度，但js做动画需要定时器，很不方便。
其实就是里外容器对向滚动，滚动的值为里外容器宽度的差值，如果里容器与外容器等宽，那么差值就为0，视觉上是没有滚动的，就像第一条数据；如果里容器宽度比外容器宽，里容器向左滚动的距离比外容器向右滚动的距离大，就会形成滚动效果，并在里容器translateX为-100%外容器translate为100%时停下，视觉效果就是滚动到文字的最右侧。
里容器的float: left;是为了形成块级格式化上下文，避免文字撑不开容器。
<head>
<meta charset="utf-8">
<style>
.item{
height:100px;
width:200px;
background:pink;
}
.marquee {
overflow: hidden;
}
.marquee .marquee-wrap {
width: 100%;
animation: marquee-wrap 4s infinite linear;
}
.marquee .marquee-content {
float: left;
white-space: nowrap;
min-width: 100%;
animation: marquee-content 4s infinite linear;
}
@keyframes marquee-wrap{
0%,
30% {
transform: translateX(0);
}
70%,
100% {
transform: translateX(100%);
}
}
@keyframes marquee-content{
0%,
30% {
transform: translateX(0);
}
70%,
100% {
transform: translateX(-100%);
}
}
</style>
</head><body>
<ul>
<li class="item marquee">
<div class="marquee-wrap">
<div class="marquee-content">
这个是非超长数据不动。
</div>
</div>
</li>
<li class="item marquee">
<div class="marquee-wrap">
<div class="marquee-content">
这是头，这个是超长数据，我超长了哦，我超长了哦，我超长了哦。
</div>
</div>
</li>
</ul>
</body>