html - 向上滑动内容不正常

Question

我是 html 和 css 的新手。试图在我的网页中制作一部分，我希望一些图像和文本并排向上滑动。我为此使用了 html 和 css。

这是 JSFIDDLE 中代码的链接:

Sliding up code

    /* Chrome, Safari, Opera */ 
    @-webkit-keyframes mymove {
        0% { top: 0%; }
        20% { top: -0%; }
        25% { top: -20%; }
        45% { top: -25%; }
        50% { top: -45%; }
        70% { top: -50%; }
        75% { top: -70%; }
        95% { top: -75%; }
        100% { top: -100%; }
    }

    /* Standard syntax */
    @keyframes mymove {
        0% { top: 0%; }
        20% { top: -0%; }
        25% { top: -20%; }
        45% { top: -25%; }
        50% { top: -45%; }
        70% { top: -50%; }
        75% { top: -70%; }
        95% { top: -75%; }
        100% { top: -100%; }
    }

实际上它只向上滑动图像而不显示文本。但我两者都需要。

Answer 1

请检查更新后的代码。现在它工作正常。

#image_slider_right {
  background-color: #CCFF00;
  width: 50%;
  float: left;
  height: 250px;
  margin: 50px 0 0 50px;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
  0% {
    top: 0%;
  }
  20% {
    top: -0%;
  }
  25% {
    top: -20%;
  }
  45% {
    top: -25%;
  }
  50% {
    top: -45%;
  }
  70% {
    top: -50%;
  }
  75% {
    top: -70%;
  }
  95% {
    top: -75%;
  }
  100% {
    top: -100%;
  }
}
/* Standard syntax */

@keyframes mymove {
  0% {
    top: 0%;
  }
  20% {
    top: -0%;
  }
  25% {
    top: -20%;
  }
  45% {
    top: -25%;
  }
  50% {
    top: -45%;
  }
  70% {
    top: -50%;
  }
  75% {
    top: -70%;
  }
  95% {
    top: -75%;
  }
  100% {
    top: -100%;
  }
}
div#sliderup {
  overflow: hidden;
  position: relative;
  height: 100%;
  margin-left: 10px;
  width: 98%;
}
div#sliderup figure .img_up {
  width: 98%;
  height: 100%;
  float: left;
  margin-bottom: 10px;
  position: relative;
}
div#sliderup figure {
  position: relative;
  width: 98%;
  margin: 0;
  text-align: left;
  animation: 20s mymove infinite;
}
.divimgslideup {
  float: left;
  width: 50%;
}
.divimgslideup_txt {
  float: left;
  width: 50%;
}

<div id="image_slider_right">

  <div id="sliderup">
    <figure>
      <div class="img_up">
        <div class="divimgslideup">
          <img src="http://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" alt="" height="100px" width="100px">
        </div>

        <div class="divimgslideup_txt">
          <strong>Make the Best Choice</strong>
          <p>With 17 unique 1, 2 & 3 bedroom floor plans available, tap to find the</p>
        </div>
      </div>

      <div class="img_up">
        <div class="divimgslideup">
          <img src="http://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" alt="" height="100px" width="100px">
        </div>

        <div class="divimgslideup_txt">
          <strong>Get Comfortable</strong>
          <p>Quality and exceptional value are foundations of our philosophy. Satisfaction with your home is our</p>
        </div>
      </div>

      <figure>
  </div>
</div>

</div>

检查 JSFIDDLE 上的工作代码