Как сделать, чтобы transition плавно изменял свойство сначала с 1 скоростью, а в конце с другой. (Дальше в описание)

Для достижения плавного изменения свойства с разной скоростью в начале и конце transition, вы можете использовать функцию кубического сплайна (cubic-bezier) в CSS.

Функция кубического сплайна позволяет определить свою собственную траекторию изменения значения свойства в течение времени. В CSS вы можете использовать свойство `transition-timing-function` для задания функции кубического сплайна.

Пример использования функции кубического сплайна с разной скоростью изменения в начале и конце transition:

```css
.element {
transition-property: property-name;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
```

В данном примере `cubic-bezier(0.25, 0.1, 0.25, 1)` определяет функцию кубического сплайна с разной скоростью в начале и конце. Значения `0.25, 0.1, 0.25, 1` определяют управляющие точки для кривой сплайна. Можно экспериментировать с этими значениями, чтобы достичь желаемого эффекта.

Относительно анимации MixitUp, чтобы предотвратить повторное проигрывание анимации, вы можете использовать псевдокласс `:not(:target)` в CSS для применения transition только в том случае, если элемент не является целью. Например:

```css
.element:not(:target) {
transition-property: property-name;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
```

Это позволит применять transition только в том случае, если элемент не является целью (не находится в состоянии проигрывания анимации MixitUp).

Убедитесь, что заменяете `property-name` на имя свойства CSS, которое вы хотите анимировать.

Пример:

  

.slideR { 

    animation: slideR 0.8s cubic-bezier(0.250, 0.450, 0.460, 0.980) both; 

} 

@keyframes slideR { 

  0% { ransform: translateX(0); } 

  100% { transform: translateX(200px); } 

} 

 

 

Результат:

Кривые Безье