Почему не работает @keyframes?

У элемента .circle стоит дефолтное значение position - static, оно как бы знать не знает о существование left и других правил.

Укажите ему, допустим position: relative

.wrapper {
  margin: 0 auto; 
  width: 500px;
  height: 500px;
  background: #FFCC99;
}

.circle { 
  width: 100px;
  height: 100px;
  background: #FF6666;
  border-radius: 100%;
  animation-name: circle;
  animation-duration: 2s;
  position: relative;
}


@keyframes circle{
  0% {
    left: 0%;
  }
  
  50% {
    
  }
  
  
  100% {
    left: 100%;
  }
}

<div class="container">
  <div class="wrapper">
    <div class="circle">
      
    </div>
  </div>
</div>

Используя в анимации left вы подразумеваете что позиционирование объекта должно быть абсолютным. просто добавьте в класс circle position: absolute;. Но я подразумеваю, что тогда у Вас собъется позиционирования относительно родителя, поэтому предлогаю использовать следующее: transform: translateX(0%); и transform: translateX(100%);