html - 如何为元素设置动画，使其在 HTML5 和 CSS3 中的父元素内循环？

Question

我正在尝试实现与“向下滚动图标”中的动画类似的动画 at this page .

这是我的尝试:

body {
  background-color: black;
}

@keyframes anim {
   0% { top: 18% }
   30% { top: 18% }
   50% { top: 100% }
   51% { top: -50% }
   70% { top: 18% }
   100% { top: 18% }
}

#scroll-down-icon {
  position: absolute;
  left: 32px;
  top: 32px;
  border: 2.3px solid white;
  width: 128px;
  height: 128px;
  border-radius: 64px;
}

h1 {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
  font-size: 32px;
  left: 0;
  top: 18%;
  text-align: center;
  animation-name: anim;
  animation-duration: 1.75s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

<div id="scroll-down-icon"><h1>╲╱</h1></div>

但是上面的代码并没有使 h1 在 #scroll-down-icon div 中真正“循环”。

我如何解决这个问题并使用 CSS 和 HTML 创建类似于页面中出现的效果？

Answer 1

div {
  overflow:hidden;
  cursor: pointer;
}

body {
  background-color: black;
}

@keyframes anim {
   0% { top: 18% }
   30% { top: 18% }
   50% { top: 100% }
   51% { top: -50% }
   70% { top: 18% }
   100% { top: 18% }
}

#scroll-down-icon {
  position: absolute;
  left: 32px;
  top: 32px;
  border: 2.3px solid white;
  width: 128px;
  height: 128px;
  border-radius: 64px;
}

h1 {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
  font-size: 32px;
  left: 0;
  top: 18%;
  text-align: center;
  animation-name: anim;
  animation-duration: 1.75s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}  
 
div {
  overflow:hidden;
  cursor: pointer;
}

<div id="scroll-down-icon"><h1>╲╱</h1></div>