Question 365420 in CSS Question posted in
Some basic documentation can be found here.

Css – Is it possible to make an sliding img animation continuous at a faster rate?

I am trying to do something like this

.image_wrap {
   width:580px;
   height:260px;
   overflow:hidden;
}
.image_wrap img {
        width:100%;
        height:100%;
        transform:scale(1.2);
        -webkit-animation: 1s slideImg linear infinite;
        animation: 1s slideImg linear infinite;
    }
    
    @-webkit-keyframes slideImg {
        from { transform: translateY(100%); }
        to { transform: translateY(-100%); }
    }
    @keyframes slideImg {
        from { transform: translateY(100%); }
        to { transform: translateY(-100%); }
    }

but I am trying to make it so the there isn’t a white space between repetitions. Is this possible?

To be honest I’ve only tried a few things but the latest thing I was planning on trying is to use the background-img and set that in a separate div and try animating that?

Tags:

2

Answers


  1. 0

    To make the image slide up faster, you can reduce the duration of the animation in your CSS. The duration of the animation is currently set to 1 second for the standard animation and 2.6 seconds for the -webkit prefixed animation. You can adjust these values to make the animation faster.

    .image_wrap img {
    width:100%;
    height:100%;
    transform:scale(1.2);
    -webkit-animation: 1.3s slideImg linear infinite; /* Adjusted from 2.6s to 1.3s */
    animation: 0.5s slideImg linear infinite; /* Adjusted from 1s to 0.5s */
}

@-webkit-keyframes slideImg {
    from { transform: translateY(100%); }
    to { transform: translateY(-100%); }
}
@keyframes slideImg {
    from { transform: translateY(100%); }
    to { transform: translateY(-100%); }
}

    https://jsfiddle.net/kwdhqax6/

    Login or Signup to reply.
  2. 0

    The easiest solution is to duplicate the slides. Like this:

    .slider {
  max-width: 580px;
  height: 260px;
  overflow: hidden;
}
.images {
  animation: 4s slider linear infinite;
}
.images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes slider {
  0%,100% {
    transform: translateY(0);
  }
  99.999% {
    transform: translateY(-50%);
  }
}
    <div class="slider">
  <div class="images">
    <img src="https://picsum.photos/id/6/580/260" alt="">
    <img src="https://picsum.photos/id/66/580/260" alt="">
    <img src="https://picsum.photos/id/666/580/260" alt="">
    <!-- duplicates -->
    <img src="https://picsum.photos/id/6/580/260" alt="">
    <img src="https://picsum.photos/id/66/580/260" alt="">
    <img src="https://picsum.photos/id/666/580/260" alt="">
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search