CSS如果溢出则滚动/翻译元素-CSSscroll/translateYanelementifitoverflows

Is it possible to optionally "scroll" an element if it grows beyond its bounding-box size? That is, say I have a div with overflow: hidden and a list of items within, I'd like to have a looping animation which, over the course of the animation, displays all the items in the list, "scrolling" (translateY?) to the bottom and then back to the top. Here's my best attempt at an ascii art example:

如果元素超出其边界框大小，是否可以选择“滚动”元素？也就是说，假设我有一个带溢出的div：隐藏和其中的项目列表，我想要一个循环动画，在动画过程中，它会显示列表中的所有项目，“滚动”（translateY） ？）到底部然后回到顶部。这是我在ascii艺术示例中的最佳尝试：

                             AAAAAA                             
               AAAAAA        BBBBBB        AAAAAA               
+------+      +------+      +------+      +------+      +------+
|AAAAAA|      |BBBBBB|      |CCCCCC|      |BBBBBB|      |AAAAAA|
+------+  ->  +------+  ->  +------+  ->  +------+  ->  +------+
 BBBBBB        CCCCCC                      CCCCCC        BBBBBB 
 CCCCCC                                                  CCCCCC 

I don't know a lot about css, but I've been reading up on it and css animations. I'm wondering if there's a way to "conditionally" trigger such an animation? Or, would it be possible to write the animation in such a way that it could always be running and would just do the right thing even if the whole list was visible (that is, it was short enough that it was not overflowing), and then as the list grew, the effect of the animation would actually show up?

我不太了解css，但我一直在阅读它和css动画。我想知道是否有办法“有条件地”触发这样的动画？或者，是否可以以这样的方式编写动画，即它可以始终在运行，即使整个列表都可见（也就是说，它足够短以至于没有溢出），它也会做正确的事情，并且随着列表的增长，动画的效果实际上会显现出来？

EDIT: I should clarify I'd like to achieve a "scrolling"-style of animation, rather than just instantaneously replacing the elements that are visible.

编辑：我应该澄清我想要实现一种“滚动”式的动画，而不是只是瞬间替换可见的元素。

2 个解决方案

#outer {
  overflow: hidden;
  width: 100px;
  min-height: 100px;
  height: 100px;
  }
  
#inner {
  height: auto;
  -webkit-animation: scrolly 10s infinite; /* Safari 4+ */
  -moz-animation: scrolly 10s infinite; /* Fx 5+ */
  -o-animation: scrolly 10s infinite; /* Opera 12+ */
  animation: scrolly 10s infinite; /* IE 10+, Fx 29+ */
}

#inner img {
 display: block;
 margin: 0 0 1px 0;
}


@-webkit-keyframes scrolly {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(calc(-100% + 101px)); }
  100% { transform: translateY(0px); }
}
@-moz-keyframes scrolly {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(calc(-100% + 101px)); }
  100% { transform: translateY(0px); }
}
@-o-keyframes scrolly {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(calc(-100% + 101px)); }
  100% { transform: translateY(0px); }
}
@keyframes scrolly {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(calc(-100% + 101px)); }
  100% { transform: translateY(0px); }
}

//Changed index so 1 is actually first image, rather than starting at 0 index
var index = 1;
var paused = false;
var slideShow = [];

for (i=0; i slideShow.length) {
    index = 1;
  }
  else if (index+n <= 0) {
    index = slideShow.length;
  }
  else {
    index += n;
  }
  showDivs();
}

function showDivs() {
  //Hide all slideShow elements, and then show only the targeted element
  for (let i=1; i<=slideShow.length; i++) {
    slideShow[i-1].style.display = "none";
  }
  slideShow[index-1].style.display = "inline";
}

<
1
2
3
4
5
>