List rotation with limited elements

Question

I have div container with list (cards) inside. When I hover it, cards start to moving (translateX animation). container\'s width

Answer 1

Update 2:

I wrote a jquery plugin that may act the way you want:

you can add as many cards as you want, right now the "translateX" is random (the script will choose randomly the final card)

link to the demo

---

Update:

I know, I used duplicates, but now my code works on three cards:

• I added three "fake" cards
• Each "real" card has it's own animation
• the "fake" cards will be overlapped by the real ones once their cycle is finished ("when there is no element to show" as you asked)

check the snippet:

.container {
  width: 300px;
  height: 100px;
  border: 2px solid black;
  overflow: hidden;
}
.card {
  float: left;
  height: 100px;
  width: 100px;
  background-color: blue;
  box-sizing: border-box;
  border: 2px solid red;
  color: white;
  font-size: 23px;
}
.cards {
  width: 600px;
}
.container:hover .card1{
  animation: 1600ms slide1 infinite linear;
}
.container:hover .card2{
  animation: 1600ms slide2 infinite linear;
}
.container:hover .card3{
  animation: 1600ms slide3 infinite linear;
}
.fakecard{z-index:-1000;}
.container:hover .fakecard{
  animation: 1600ms fakeslide infinite linear;
}

@keyframes slide1 {
  0% { transform: translateX(0px); }
  33% { transform: translateX(-100px); }
  33.1% { transform: translateX(+200px); }
  100% { transform: translateX(0px); }
}
@keyframes slide2 {
  0% { transform: translateX(0px); }
  66% { transform: translateX(-200px); }
  66.1% { transform: translateX(100px); }
  100% { transform: translateX(0px); }
}
@keyframes slide3 {
  0% { transform: translateX(0px); }
  99% { transform: translateX(-300px); }
  99.1% { transform: translateX(+300px); }
  100% { transform: translateX(0px); }
}
@keyframes fakeslide {
  0% { transform: translateX(0px); }
  99% { transform: translateX(-300px); }
  99.1% { transform: translateX(+300px); }
  100% { transform: translateX(0px); }
}

  

    

      1
    
    

      2
    
    

      3
    
    

      1 (fake)
    
    

      2 (fake)
    
    

      3 (fake)
    
  

---

Previous answer:

Is this what you are trying to achieve?

I don't think you can do it without duplicates...

If not, can you explain better what you are trying to achieve here?

[snipped code removed]