Можно ли с помощью css создать анимацию "ускоряй, а затем и выбери"?

Question

Мне интересно, можно ли было бы добиться анимации " ускоряй, затем выбери " с помощью css, как в этом примере 3D.js

По сути, объект начинает с 0 скорости и ускоряет свое движение до определенной точки, а после этого сохраняет постоянную скорость.

Я подумал, что это можно сделать, применив анимацию вращения дважды к одному и тому же элементу, но с разными параметрами: * первое вращение: объект вращается в течение 2 секунд без задержки с помощью функции замедления; * после этого: объект вращается в течение 1,5 секунд с задержкой в ​​2 секунды для учета первого вращения с линейной функцией. На этот раз вращение повторяется бесконечно.

Поэтому я попробовал следующий код

.square {
    width: 120px;
    height: 120px;
    background: #c00;
    -webkit-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s 2s linear infinite;
    -moz-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s 2s linear infinite;
    animation:
        spin 2s 0 ease-in 1,
        spin 1.5s 2s linear infinite;
    }
}
@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { transform:rotate(360deg); }
}

Я знаю, что это не то же самое, что пример 3D.js, но это достаточно близко. Проблема в том, что объект останавливается немного перед завершением первого поворота, и это выглядит очень странно.

Я подготовил скрипку, чтобы показать проблему: http://jsfiddle.net/e0sLc8sw/

Любая идея?

Спасибо всем за вашу помощь!

Answer 1

Это не только потому, что вы добавили 2 раза ко второй анимации?

Согласно MDN, вторая запись времени обрабатывается как задержка анимации, которая указывает анимации начинаться после этого периода времени.

Удаление 2s часть из анимации работает отлично:

.square {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    width: 100px;
    height: 100px;
    background: #c00;
    -webkit-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s linear infinite;
    -moz-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s linear infinite;
    animation:
        spin 2s 0 ease-in 1,
        spin 1.5s linear infinite;
}

@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { transform:rotate(360deg); }
}

<div class="square spinning">:D</div>

ОБНОВЛЕННАЯ СКРИПКА

Answer 2

Предыдущие примеры не работают в современном Chrome (2018). Вот обновленный пример, использующий кубическую кривую Безье для управления ускорением - вы можете поиграть с параметрами ускорения здесь.

Первая анимация обрабатывает ускорение - 3 секунды здесь показывают, что он достигнет последнего кадра через 3 секунды с помощью функции ускорения Безье. Затем он заканчивается. 3 секунды во второй анимации указывают, что этот начинается именно там, где остановился другой, т.е. у него есть 3-секундная задержка, но этот никогда не заканчивается, так как имеет "бесконечную" продолжительность. Это намного быстрее на 0,5 секунды.

В идеале скорость 0,5 секунды должна соответствовать точной скорости первой анимации, вызванной ускорением Безье. Это ручной расчет, с которым я не думаю, что CSS помогает, и я не выполнял здесь, просто использовал глазной тест.

.square {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    width: 100px;
    height: 100px;
    background: #c00;
    animation:
        spin 3s cubic-bezier(.52,.29,.83,.13),
        spin 0.5s linear 3s infinite;
}

@keyframes spin { 
    100% { transform:rotate(360deg); }
}

<div class="square spinning">:D</div>