Как сделать скорость анимации кубика 2 секунды ,а продолжительность 15 секунд?

Для того чтобы сделать скорость анимации кубика 2 секунды, а продолжительность 15 секунд, необходимо использовать CSS анимации и задать соответствующие значения свойствам анимации.

Прежде всего, создадим стили для кубика:

 
    .cube {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation: cubeAnimation 15s linear infinite;
    }
 
    @keyframes cubeAnimation {
        0% {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(360deg);
        }
    }

Здесь мы создали стиль для кубика с классом "cube", который будет анимироваться с помощью ключевого кадра "cubeAnimation". Анимация будет длиться 15 секунд и будет повторяться бесконечно.

Теперь нам нужно изменить скорость анимации кубика на 2 секунды. Для этого добавим свойство "animation-duration" в стиль кубика:

 
    .cube {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation: cubeAnimation 15s linear infinite;
        animation-duration: 2s;
    }
 
    @keyframes cubeAnimation {
        0% {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(360deg);
        }
    }

Теперь скорость анимации кубика составляет 2 секунды, а продолжительность - 15 секунд. Кубик будет вращаться по оси Y за 2 секунды и продолжать вращаться в течение 15 секунд. В случае необходимости, вы можете настроить другие параметры анимации, такие как тайминг функции или направление вращения.