Question

我试图在最后一个结束后从头开始循环动画。写这一行会使动画重叠：

animation: FadeIn 5s infinite;

@keyframes FadeIn {
    0% {left: 0%; opacity: 0;}
    10% {left: 5%; opacity: 1;}  
    100% {left: 110%; opacity: 0;}
}

.testing > div:nth-child(1) {
    animation-delay: 5s;
    transition:opacity 1 10s;
}
 
.testing > div:nth-child(2) {
    animation-delay: 10s;
}
 
.testing > div:nth-child(3) {
    animation-delay: 15s;
}
 
.testing > div:nth-child(4) {
    animation-delay: 20s;
}
 
.testing > div:nth-child(5) {
    animation-delay: 25s;
}
 
.testing > div:nth-child(6) {
    animation-delay: 30s;
}

.testing > div:nth-child(7) {
    animation-delay: 35s;
}
 
.testing > div:nth-child(8) {
    animation-delay: 40s;
}
 
.testing > div:nth-child(9) {
    animation-delay: 45s;
}
 
.testing > div:nth-child(10) {
    animation-delay: 50s;
}

.testing > div {
	  opacity: 0;
    position: absolute;
    display: block;
    top: 4em;
    width: 95%;
    font-size: 13px;
    animation-timing-function: linear;
    animation: FadeIn 5s infinite;
}

<div class="testing">
														
	<div>Green</div>
	<div>Blue</div>
	<div>Yellow</div>
	<div>Red</div>
	<div>Purple</div>
	<div>Brown</div>
	<div>Silver</div>
	<div>Grey</div>
	<div>Gold</div>
	<div>Black</div>

</div>

有什么想法吗？感谢。

Answer 1

divs重叠，因为position: absolute已将它们放在同一个地方。

animation-delay可让您在每个div出现动画时错开。但是，它不会创建您想要的效果，因为在动画的一个循环之后div返回到开头并重叠下一个div。

另一种方法是将divs包装在容器中，然后为容器设置动画。

<强>设置

将容纳动画的外部容器。应用overflow: hidden，以便动画div不会创建水平滚动条。
将动画的内部容器。此容器的宽度应为100% x the number of child elements。

对于10个元素，容器宽度为1000％

对于20个元素，容器宽度为2000％
嵌套元素浮动显示为内联。每个元素的宽度为100/the number of elements。

对于10个元素，宽度为10％

对于20个元素，宽度为5％
动画的结束位置是动画容器的宽度（具有负值）。

对于10个元素，right: -1000%

对于20个元素，right: -2000%
animation-duration应与动画容器中的元素数量成比例 - 使用更长的持续时间和更多元素。

fiddle with 10 elements

fiddle with 20 elements

fiddle with styling

＆＃13;

@keyframes FadeIn {
  0% {
    right: 0%;
  }
  100% {
    /* right = same value as .animate width */
    right: -1000%;
  }
}

.testing {
  height: 12em;
  position: relative;
  overflow: hidden;
}

.animate {
  /* width = number of elements x 100% */
  width: 1000%;
  position: absolute;
  /* adjust the duration proportional to the number of elements */
  animation: FadeIn 25s linear infinite;
}

.animate div {
  float: right;
  /* width = 100% / number of elements */
  width: 10%
}





/* create opacity effect */
.testing:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10em;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

＆＃13;

<div class="testing">
  <div class="animate">
    <div>Green</div>
    <div>Blue</div>
    <div>Yellow</div>
    <div>Red</div>
    <div>Purple</div>
    <div>Brown</div>
    <div>Silver</div>
    <div>Grey</div>
    <div>Gold</div>
    <div>Black</div>
  </div>
</div>

＆＃13;

CSS动画无限重叠

1 个答案: