Для изменения настроек анимации в CSS можно использовать свойство `animation-duration`. Вам нужно задать значение этого свойства в 15 секунд, чтобы весь процесс анимации длился 15 секунд:
```css
.cube {
...
animation-duration: 15s; /* Длина анимации в секундах */
...
}
```
Теперь укажите длительность каждого движения кубика в 2 секунды. Для этого измените значение свойства `animation-duration` для каждого отдельного движения кубика:
```css
.front {
...
animation-duration: 2s;
...
}
.back {
...
animation-duration: 2s;
...
}
.right {
...
animation-duration: 2s;
...
}
.left {
...
animation-duration: 2s;
...
}
.top {
...
animation-duration: 2s;
...
}
.bottom {
...
animation-duration: 2s;
...
}
```
Касательно изменения скорости вращения кубика на 2 секунды вместо 15 секунд, вам следует изменить значение свойства `animation-duration` для анимации вращения:
```css
.rotation {
...
animation-duration: 2s; /* Изменили длительность на 2 секунды */
...
}
```
После внесения всех этих изменений, кубик будет перемещаться в течение 15 секунд, при этом каждое движение займет 2 секунды, а вращение будет происходить с такой же скоростью – 2 секунды на один оборот.