css3小动画实现疑问

Question

想要实现一个类似公告滚动的动画，重要的一点是想让动画接近尾部的时候，头部再次出现，也就是视口同时显示头部和尾部，但是保留一定的距离，我尝试用了两个div但是会有重叠，求用css3如何实现
另外一个问题：
假如我这个滚动的内容不固定长度，我想让它滚动到尾部停止，dome里面写最后一帧是固定的值，如果文字变多还需要改变固定值这里该如何写可以适应不固定长度的文案
jsfiddle 链接

Answer 1

.roll-inner2 {
  animation: roll 8s infinite linear;
  animation-delay: 4s;
}

animation-delay这个改下