我的CSS @keyframes（移动图像和显示）不起作用

Question

这两个@keyframes无法正常工作。

我想尝试一组咖啡图像，从屏幕右侧滑入并向左和向中间移动，显示一段文字说出＆＃34;查看我们新增的菜单＆＃34;。

两个@keyframes最初暂时工作，但后来停止了，我没有改变任何东西，所以我不知道为什么他们会停止

＆＃13;

＆＃13;

#slider .container {
  position: relative;
  top: -550px;
  left: -1px;
  background: #535a6c;
  width: 1210px;
  height: 290px;
}

#slider .container img {
  height: 170px;
  margin: 10px;
  position: relative;
  left: 190px;
  top: 50px;
  animation: moving images 3s infinite;
}

#slider .container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#slider .container ul li {
  float: left;
  position: relative;
}

details details details. details details details details details details details details details .animatedText {
  color: #e3c383;
  font-family: "Arial", sans-serif;
  font-size: 28px;
  line-height: 2.3px;
  text-align: justify;
  float: right;
  margin-left: 10px;
  padding: 0;
  top: -830px;
  left: -190px;
  position: relative;
  animation: appear 3s infinite;
  font-weight: bold;
  transform-origin: center bottom;
}

.animatedText a {
  font-size: 28px;
  color: #e3c383;
  animation: appear 3s infinite;
  font-weight: bold;
  transform-origin: center bottom;
}

.animatedtext a:hover {
  color: rgba(170, 122, 70, 0.99);
}

@keyframes moving images {
  to {
    transform: translate(-200px)
  }
  from {
    transform: translate(1000px)
  }
}

@keyframes appear {
  to {
    opacity: 0;
  }
  from {
    opacity: 1;
  }
}

＆＃13;

<section id="slider">
  <div class="container">
    <ul>
      <li class="1">
        <img src="https://thumbsdreamstime.com/b/
                           irish-coffee-glass-isolated-white 
                           background-made-whiskey-light-cream-   
                           76284912.jpg" alt="COCO 4 U Drink Option">
      </li>

      <li class="2">
        <img src="https://previews.123rf.com/images/ 
                           imagestore/imagestore1606/
                           imagestore160600277/57801349-
                           iced-coffee-mocha-in-glass-with-cream-  
                           isolated-on-white-background-Stock-   
                           Photo.jpg" alt="COCO 4 U Drink Option">
      </li>

      <li class="3">
        <img src="https://previews.123rf.com
                           /images/baibaz/baibaz1504/
                           baibaz150400016/39092393-iced-coffee-   
                           covered-with-whipped-cream-in-	
	                   plastic-glass-isolated-on-white-     
                           background-Stock-  
                           Photo.jpg" alt="COCO 4 U Drink Option">
      </li>

      <li class="4">
        <img src="https://encrypted   
                           tbn0.gstatic.com/images?  
                           q=tbn:ANd9GcQw02NI5xexM02vb80W  
                           0KS0dMhVrHPjpgy2QG6oCkkdca_zwDG" alt="COCO 4 U Drink Option">
      </li>

      <li class="5">
        <img src="https://thumbs.dreamstime.com/b/
                           coffee-latte glass-mug-steamed-milk- 
                           head-milk-banding-blending-body- 
                           white background-37395333.jpg" alt="COCO 4 U Drink Option">
      </li>

      <li class="6">
        <img src="https://www.colourbox.com/preview/
                           18200442-glass-coffee-frappe-    
                           isolated.jpg" alt="COCO 4 U Drink Option">
      </li>

    </ul>

  </div>
</section>



<div class="menu_teaser">
  <h3 class="animatedText">CHECK OUT OUR THE ADDITIONS TO OUR MENU
    <a href="ourmenu.html"><strong> HERE</strong>.
                 </a>
  </h3>
</div>

＆＃13;

＆＃13;

＆＃13;