滑动内容无法正常工作

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

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

＆＃13;

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

检查JSFIDDLE

上的工作代码