Свойство transform: translate не срабатывает при назначенной анимации
 

Добрый день.

Для элемента в HTML назначены медиа-запросы с помощью которого данный объект смещается по ои X на определенном разрешении. Так же для данного элемента сформирована бесконечная анимация.
В результате всего при воспроизведении анимации transform: translateX; для элемента не срабатывают. Если исключить анимацию для элемента свойства transform: translateX для элемента срабатывают.
Каким образом их нужно скомпоновать, чтобы синхронно работала анимация и срабатывали назначенные свойства через медиа-запросы

.decore__item{
 
    @media (max-width: toEm(1267)){
      transform: translateX(20px);
    }
 
    @media (max-width: toEm(1099.98)){
      transform: translateX(130px);
    }
 
    animation: professionRotate 13s ease-out infinite;
 
    @keyframes professionRotate {
      
      0%, 20%{
        transform: rotate(0deg);
      }
      25%, 45%{
        transform: rotate(-90deg);
      }
      50%, 70%{
        transform: rotate(-180deg);
      }
      75%, 85%{
        transform: rotate(-270deg);
      }
      100%{
        transform: rotate(-360deg);
      }
    }
}