我不知道纯css是否可以做到这一点，但是我使用"intersection observer api"在javascript中做了类似的事情（见：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API）
你可以用它来"观察"一个元素什么时候进入视图，什么时候它添加了一个额外的类。（当项目滚动到视图中时，我添加了类'play-animation'。该类包含需要发生的动画和过渡。代码可能不完美，但应该给您一个起点）

/* Tell the 'observer' what needs to happen */
var observer = new IntersectionObserver(function(entries) {
  //loop through all the elements given to the observer
  entries.forEach(function(element) {
    //isIntersecting is true when the element is being scrolled into view
    if(element.isIntersecting === true){
            //do something      
      element.target.classList.add("play-animation");
       
      /* 
       * optional: By callsing the 'unobserve' the element gets removed from the observer 
       * (by doing this, if the element is scrolled out of view and back into view after, nothing will happenn) 
       */
      observer.unobserve(element.target);
    }
  });
}, { threshold: [0] });

/* now tell the observer what elements to loo for */
observer.observe(document.querySelector('.progress-ai'));
observer.observe(document.querySelector('.progress-dw'));

.flex-container1 {
  display: flex;
  flex-wrap: wrap;
}

.flex-container1>div {
  margin: 20px;
  margin-bottom: 5px;
}

.progress-bar-ai {
  position: relative;
  top: 45px;
  left: 30px;
  background-color: #310000;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  margin: 15px;
  height: 20px;
  width: 200px;
  max-width: 100%;
}

.progress-ai {
  position: absolute;
  top: 3px;
  right: 3px;
  border-radius: 20px;
  height: 14px;
  float: right;
}

.progress-bar-dw {
  position: relative;
  top: 45px;
  right: 30px;
  background-color: #480036;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  margin: 15px;
  height: 20px;
  width: 200px;
  max-width: 100%;
}

.progress-dw {
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 20px;
  height: 14px;
}
.progress-dw.play-animation {
  background: #FF40F0;
  width: 40%;
  transition: width 0.5s ease-in;
  animation: load 2s normal;
}
.progress-ai.play-animation {
  background: #EEA808;
  width: 90%;
  transition: width 0.5s ease-in;
  animation: load 2s normal;
}

@keyframes load {
  0% {
  width: 0;
  animation-name: trigger;
  }
}

<div>&nbsp;<br />Scroll down<br />&nbsp;</div>
<img class="img-fluid" src="https://via.placeholder.com/300x1500.png" width="300" height="1500" alt="..." />

<div class="flex-container1">
  <div class="progress-bar-ai">
    <div data-size="20" class="progress-ai"></div>
  </div>
  <div><img class="img-fluid" src="assets/img/icons/Illustrator.png" width="90" height="auto" alt="..." /></div>
  <div><img class="img-fluid" src="assets/img/icons/Dreamweaver.png" width="90" height="auto" alt="..." /></div>
  <div class="progress-bar-dw">
    <div data-size="20" class="progress-dw"></div>
  </div>
</div>
<div>&nbsp;<br />&nbsp;<br />&nbsp;</div>