Можно ли с помощью css создать анимацию "ускоряй, а затем и выбери"?
Мне интересно, можно ли было бы добиться анимации " ускоряй, затем выбери " с помощью 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/
Любая идея?
Спасибо всем за вашу помощь!
2 ответа
Это не только потому, что вы добавили 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>
Предыдущие примеры не работают в современном 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>