How to make this effect ? Animation CSS?

Question

Good afternoon

There is an effect of a cart traveling a road in the link below:

http://institutosorridents.org.br/

Inspecting the code I found the css code below :

#rota-do-sorriso > #mapa > #unidade-movel {
    position: absolute;
    left: 100%;
    top: 97px;
    animation: unidade-movel 10s infinite;
}

I realized that this is an Animation a feature I have not seen before but I tried to use the same code of this site but I could not.

Could someone help me ?

I stand by

Answer 1

Man what happens is that this property animation is a shorthand for several other attributes, it is the same as background-imagem, background-size, etc. but with the animation is something like animation-name, animation-direction, etc... read more here. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Usando_anima%C3%A7%C3%B5es_CSS

About that animation her name is unidade-movel then you have to search the CSS @keyframes unidade-movel this is the animation instantiated in animation

I replicated the code here for you to understand better

 body {
 padding-top:30px;
 }
 #rota-do-sorriso > #mapa > #unidade-movel {
    position: absolute;
    left: 100%;
    top: 97px;
    animation: unidade-movel 3s infinite;
}

 @keyframes unidade-movel {
  0% {
      top: -64px;
      left: 0%;
  }
  10% {
      top: -64px;
      left: 10%;
  }
  20% {
      top: -64px;
      left: 20%;
  }
  30% {
      top: -64px;
      left: 30%;
  }
  40% {
      top: -26px;
      left: 45%;
  }
  45% {
      top: 28px;
      left: 42%;
  }
  50% {
      top: 75px;
      left: 31%;
  }
  60% {
      top: 97px;
      left: 40%;
  }
  70% {
      top: 97px;
      left: 50%;
  }
  80% {
      top: 97px;
      left: 60%;
  }
  90% {
      top: 97px;
      left: 70%;
  }
  100% {
      top: 97px;
      left: 100%;
  }
}

<section id="rota-do-sorriso" class="pt-3 pdd-v">

    <div class="content">
        <div class="row">
            
            

        </div>
    </div>

    <div id="mapa" class="d-none d-lg-block">

        <span id="estrada">
            <img src="https://placecage.com/300/100" width="100%" height="auto">
        </span>

        <span id="unidade-movel">
            <img src="https://placecage.com/80/30" alt="Unidade Móvel" width="150rem" height="auto">
        </span>
    </div>

</section>