CSS Animation

animation

ani

mat

ion

<button class="btn">Make it smooth</button>
    <div class="container">
        <section class="section">
            <div class="card">
                <h1>ani</h1>
            </div>
            <div class="card">
                <h1>mat</h1>
            </div>
            <div class="card">
                <h1>ion</h1>
            </div>
        </section>
    </div>
.container {
    overflow:hidden;
}
.btn {
    background: rgba(255, 34, 153, .8);
    color: #fff;
    border: 0;
    font-size: 1em;
    padding: 0.7em 1em;
    transition: background .5s;
    
    &:hover {
        background: rgb(87, 9, 123);
    }
}
.card {
    background: #ececec;
    margin: 2em 0;
    padding: 2em;
    border-top: 5px solid rgb(0, 110, 255);
    animation: anim 1s  alternate;
    animation-iteration-count: 6;
    &:nth-of-type(1) { animation-delay: .5s;}
    &:nth-of-type(2) { animation-delay: .7s;}
    &:nth-of-type(3) { animation-delay: 1.2s;}
}
.new-anim {
    animation: anim2 1s infinite alternate !important;
}
@keyframes anim {  
 from {margin-left: 0;}
 to   {margin-left: 300px;}
}
@keyframes anim2 {
 from {transform: translateX(0);}
 to   {transform: translateX(300px);}  
}   
  

.container {
  overflow: hidden;
}
.btn {
  background: rgba(255, 34, 153, 0.8);
  color: #fff;
  border: 0;
  font-size: 1em;
  padding: 0.7em 1em;
  -webkit-transition: background .5s;
  transition: background .5s;
}
.btn:hover {
  background: #57097b;
}
.card {
  background: #ececec;
  margin: 2em 0;
  padding: 2em;
  border-top: 5px solid #006eff;
  -webkit-animation: anim 1s  alternate;
          animation: anim 1s  alternate;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
}
.card:nth-of-type(1) {
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}
.card:nth-of-type(2) {
  -webkit-animation-delay: .7s;
          animation-delay: .7s;
}
.card:nth-of-type(3) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.new-anim {
  -webkit-animation: anim2 1s infinite alternate !important;
          animation: anim2 1s infinite alternate !important;
}
@-webkit-keyframes anim {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 300px;
  }
}
@keyframes anim {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 300px;
  }
}
@-webkit-keyframes anim2 {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@keyframes anim2 {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}

 

 

 

 

 

 

const btn = document.querySelector('.btn');

        btn.addEventListener('click', () => {
            document.querySelectorAll('.card').forEach((card) => {
                card.classList.toggle('new-anim');
            })
        });