Мне интересно, можно ли использовать процентные значения следующим образом:
@keyframes myAnimation {
0% { height: 100px; }
33.3% { height: 120px; }
66.6% { height: 140px; }
100% { height: 200px; }
}
Кажется, что это работает, но я не уверен, могут ли браузеры просто "обходить" это? А как насчет таких ценностей, как 33.3457%? Большое спасибо!
Когда дело доходит до CSS, он учитывает проценты до двух знаков после запятой и затем останавливается. Таким образом, вы сможете получить 33.34%, но не 33.3457% для использования в ваших ключевых кадрах.
Надеюсь, это поможет.
Да, вы можете использовать дробную часть для определения более точных значений ключевых кадров. Но такая точность четко не указана.
Он поддерживается всеми браузерами, поддерживающими анимацию CSS. Но не используйте слишком много десятичных знаков, может возникнуть странное поведение (особенно выше 5 цифр).
Я использую это для сложных анимаций с циклами:
@keyframes{
0%, 30%, 40%, 50%, 60%{
top: 0px;
}
29.99999%, 39.99999%, 49.99999%, 59.99999%{
top: 100px;
}
100%{
top: 200px;
}
}
/*
- 0px to 100px (30%)
- loop 3 times 0px to 100px (10% each, total 30%)
- 0px to 200px (40%)
*/
Точность по умолчанию SASS составляет 3 цифры и может быть изменена с помощью --precision (опция cmd) или Sass::Script::Number.precision