How to use the linear gradient and keyframes such that the animation is smooth using css?

Question

i am implementing the loading similar to facebook skeleton screen. i have to do the same for the card. link to codepen https://codepen.io/harika123/pen/dyPmXMe

Below is the code,

.card { 
    box-shadow: 3px 3px 5px 0 rgba(0, 0,0, 0.15);
    width: 309px;
    position: relative;
    left: 250px;
    background-color: black
 }

   .loading-ui-shimmer {
         background-image: linear-gradient(90deg, rgba(207, 216, 220, 0.15), rgba(207, 216, 220, 
         0.35), rgba(207, 216, 220, 0.15));
         background-size: 100% 100%;

        -webkit-animation-duration: 1.4s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: loadanimation;
        -webkit-animation-timing-function: ease;
   }

   @-webkit-keyframes loadanimation {
      0% {
          background-position: -136px 0;
      } 
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: -136px 0;
      }
  }

As you see from the codepen, the animation is not smooth i want it to be smooth. i was looking at some tutorial and they used something like below for their example

@keyframes loadanimation {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }

    .loadingAnim {
        margin: 0 0 16px;
        padding: 6px;
        width: 100%;
        border-radius: 2px;
        background: linear-gradient(90deg, rgba(207, 216, 220, 0.15), rgba(207, 216, 220, 0.35), 
        rgba(207, 216, 220, 0.15));
        animation: loadanimation 1.4s ease infinite;
        background-size: 600% 600%;
    }

i think i am messing up with the keyframes background position. also what should be the background-size in loading_animation class in my example (that you see from codepen) could someone help me with this. thanks.