AI animation

Several examples of AI generated animations

I asked ChatGPT to write me this code below to get a short infinite animation.

See the code
<div style="
width: 610px; height: 200px; 
position: relative; 
overflow: hidden;">
  <div class="frame" 
  style="width: 100%; height: 100%; 
  position: absolute;">
    
    <div class="train" style="
    width: 62px; height: 16px; 
    position: absolute; 
    filter: blur(4.5px) hue-rotate(340deg); 
    mix-blend-mode: exclusion; left: -54px; 
    animation: trainMovement1 8s ease infinite; 
    background-color: blue; top: calc(50% - 50px);"></div>
    
    <div class="train" style="
    width: 43px; height: 16px;
    position: absolute; filter: blur(1.9px); 
    mix-blend-mode: exclusion; left: 
    -52px; animation: trainMovement2 11s 
    cubic-bezier(0.0, -0.6, 0.4, 1.3) infinite; 
    background-color: grey; top: calc(50% - 25px); 
    animation-delay: 0.9s;"></div>
    
    <div class="train" style="
    width: 53px; height: 14px; 
    position: absolute; filter: blur(1.8px); 
    mix-blend-mode: exclusion; left: -63px; 
    animation: trainMovement3 7s 
    cubic-bezier(0.0, -0.9, 0.6, 0.5)  infinite; 
    background-color: lightblue; top: 
    calc(50% - 7.5px); 
    animation-delay: 1.4s;"></div>
    
    <div class="train" style="
    width: 60px; height: 15px; 
    position: absolute; filter: blur(4.9px); 
    mix-blend-mode: exclusion; left: -85px; 
    animation: trainMovement4 8s 
    linear infinite; 
    background-color: lightpink; 
    top: calc(50% + 10px); 
    animation-delay: 1.6s;"></div>
    
    <div class="train" style="
    width: 65px; height: 13px; 
    position: absolute; filter: blur(2.5px); 
    mix-blend-mode: exclusion; left: -60px; 
    animation: trainMovement5 10s 
    cubic-bezier(0.0, -0.6, 0.2, 1.0) infinite; 
    background-color: lightgreen; top: 
    calc(50% + 27.5px); 
    animation-delay: 0.1s;"></div>
  </div>

  <style>
    @keyframes trainMovement1 {
      0% {
        transform: translateX(-150px);
      }
      100% {
        transform: translateX(680px);
      }
    }
    
    @keyframes trainMovement2 {
      0% {
        transform: translateX(-150px);
      }
      100% {
        transform: translateX(680px);
      }
    }
    
    @keyframes trainMovement3 {
      0% {
        transform: translateX(-150px);
      }
      100% {
        transform: translateX(680px);
      }
    }
    
    @keyframes trainMovement4 {
      0% {
        transform: translateX(-150px);
      }
      100% {
        transform: translateX(680px);
      }
    }
    
    @keyframes trainMovement5 {
      0% {
        transform: translateX(-150px);
      }
    
      100% {
        transform: translateX(680px);
      }
    }
  </style>
</div>

The result came not from the first try and I had to modify the code many times, but I would say it really saves my time when it comes about some complicated structures.