CSS animation is not reaching to last element

Question

I am designing a scenario where I have n number of my team members profile card which is moving from right to left.But currently in my case the animation goes up to 5 cards and then animation getting restart its not going to the last cards.

My 1st requirement: is that profile card moves from right to left till the last cards

My 2nd requirement: Its optional if you can do then let me know. In this case i want when animation reach to last card instead of restart animation the first cards appear behind the last card and this should happen in a infinite loop.

 .team-profile-card-container {
    white-space: nowrap;
    overflow: hidden;
  }
  
  .team-profile-card {
    display: inline-block;
    width: 200px;
    margin-right: 20px;
    animation: slideRightToLeft 5s linear infinite;
    border: 1px solid transparent;
  }
  
  @keyframes slideRightToLeft {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  .team-profile-card-content {
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    position: relative;
    overflow: hidden;
  }
  
  .team-profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    transition: transform 0.3s;
  }
  
  .team-profile-img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
  
  .team-profile-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .team-profile-title {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 20px;
  }
  
  .social-icons {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .team-profile-card:hover .social-icons {
    opacity: 1;
  }
  
  .team-profile-card-container:hover .team-profile-card {
    animation-play-state: paused;
  }
  
  .team-profile-card:hover {
    border-color: orangered;
  }
  
  .social-icons a {
    color: #007bff;
    font-size: 16px;
    margin: 0 5px;
    transition: color 0.3s;
  }
  
  .social-icons a:hover {
    color: #0056b3;
  }

<h2 class="module-title font-alt">Our Team Members</h2>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-12">
      <div class="team-profile-card-container">
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Avinash Singh</div>
            <div class="team-profile-title">Web Developer</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>
        
        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Ajay Patel</div>
            <div class="team-profile-title">UI/UX Designer</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>
        
        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Divya Mishra</div>
            <div class="team-profile-title">Graphic Designer</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>
        
        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://via.placeholder.com/150" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Pawan Reddy</div>
            <div class="team-profile-title">Software Engineer</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>
        
        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://via.placeholder.com/150" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Aakansha Verma</div>
            <div class="team-profile-title">Social Media Expert</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://via.placeholder.com/150" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Palak Yadav</div>
            <div class="team-profile-title">SEO Expert</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://via.placeholder.com/150" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Raushan</div>
            <div class="team-profile-title">Graphics, UI/UX Designer</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://via.placeholder.com/150" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Deepak</div>
            <div class="team-profile-title">SEO Expert</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://via.placeholder.com/150" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Saurav Singh</div>
            <div class="team-profile-title">Video Production</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://via.placeholder.com/150" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Nayan Pathak</div>
            <div class="team-profile-title">Photography</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>
        
        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Nisha Yadav</div>
            <div class="team-profile-title">Branding & Design</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Akash Verma</div>
            <div class="team-profile-title">Social Media Handling</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Naina</div>
            <div class="team-profile-title">Socail Media Influencer</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Kavita Tomar</div>
            <div class="team-profile-title">Branding & Design</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Rajiv Kumar</div>
            <div class="team-profile-title">AI Expert</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Sandeep Verma</div>
            <div class="team-profile-title">Content Writing</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Prashant Singh</div>
            <div class="team-profile-title">Lead Generation</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Abhishek Yadav</div>
            <div class="team-profile-title">Software Developer</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Tushar Nayan</div>
            <div class="team-profile-title">WEb Testing & Production</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Manish Reddy</div>
            <div class="team-profile-title">GMB/SMO</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Sumit Mishra</div>
            <div class="team-profile-title">Photography/Video Editing</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>


        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Krishna Kumar</div>
            <div class="team-profile-title">Sales</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Pradeep Saini</div>
            <div class="team-profile-title">Sales</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>

        <!-- Repeat the above profile card block for a total of 6 times -->
        <div class="team-profile-card">
          <div class="team-profile-card-content text-center p-4">
            <div class="team-profile-img">
              <img src="https://themewagon.github.io/warehouse/images/person_3.jpg" class="img-fluid" alt="Profile Picture">
            </div>
            <div class="team-profile-name">Pallavi</div>
            <div class="team-profile-title">Sales</div>
            <div class="social-icons">
              <a href="#"><i class="fab fa-facebook"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

If you add the animation to the whole container of team members, it will move them all along, until the last one reaches the end. Because you have the animation on each member individually, it doesn't care that some members are still out of view, because the animation is done - and then it resets. — Steffen, Commented Mar 22 at 11:51
@Steffen if i am adding animation in the main container 'team-profile-card-container' which contain all the profile cards this also show me only 5 cards. — Rahul Verma, Commented Mar 22 at 12:30
Did you remove the animation from the individual cards also? — Steffen, Commented Mar 22 at 20:39
@Steffen Ya i removed animation from the individual cards and applied to the main container 'team-profile-card-container' thats also showing only 5 cards. — Rahul Verma, Commented Mar 23 at 12:45
On .team-profile-card-container, remove overflow: hidden; and add animation: slideRightToLeft 5s linear infinite; — Steffen, Commented Mar 23 at 14:03

Rahul Verma · Accepted Answer · 2024-03-24 06:34:04Z

1st Requirement Solution

In this modification, I assumed there are a total of 24 cards based on my code. If the actual number of cards is different, adjust the multiplier accordingly. This modification ensures that the animation covers the entire width of all the cards before restarting.

@keyframes slideRightToLeft {
from { transform: translateX(0); } /* Start from initial position */
to { transform: translateX(calc(-100% * 24)); } /* Translate by the total width of all cards */

Collectives™ on Stack Overflow

CSS animation is not reaching to last element

1 Answer 1

Not the answer you're looking for? Browse other questions tagged
html
jquery
css
twitter-bootstrap
html5-canvas
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Not the answer you're looking for? Browse other questions tagged htmljquerycsstwitter-bootstraphtml5-canvas or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
html
jquery
css
twitter-bootstrap
html5-canvas
or ask your own question.