Можно ли указать пользовательские функции синхронизации для CSS-переходов?

Сейчас я использую CSS-переходы довольно часто, но нахожу его ограниченным, чтобы иметь доступ только к замедлениям, замедлениям и т. Д. Опция кривой Безье, по-видимому, обеспечивает максимальный контроль, но даже это не позволяет указать фактическое уравнение замедления, которое будет имитировать упругое смягчение и т. д. Есть ли другой вариант или нужно использовать javascript для выполнения этого типа анимации?

Источник

4 ответа

Решение

Я обнаружил, что нет способа сделать эластичный переход с чистым CSS. Однако вы можете обмануть и сделать CSS-анимацию. Вот что Apple использует на своем сайте:

@-webkit-keyframes open-1 {
    from { opacity:0; -webkit-transform:translate3d( 210px, -145px, 0); }
    25%  { opacity:1; -webkit-transform:translate3d( -15.6px, 4.1px, 0); }
    30%  { opacity:1; -webkit-transform:translate3d( -10.3px, 2.7px, 0); }
    35%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    40%  { opacity:1; -webkit-transform:translate3d( 4.5px, -1.2px, 0); }
    45%  { opacity:1; -webkit-transform:translate3d( 2.9px, -0.8px, 0); }
    50%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    55%  { opacity:1; -webkit-transform:translate3d( -1.3px, 0.3px, 0); }
    60%  { opacity:1; -webkit-transform:translate3d( -0.8px, 0.2px, 0); }
    65%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    70%  { opacity:1; -webkit-transform:translate3d( 0.4px, -0.1px, 0); }
    75%  { opacity:1; -webkit-transform:translate3d( 0.2px, -0.1px, 0); }
    80%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    85%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    90%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    to   { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
}

Эти анимации в значительной степени используются на собственном веб-сайте Apple: http://www.apple.com/mac/

Очевидно, что это в какой-то степени мощно - поскольку анимации выражены в процентах, вы можете легко изменить продолжительность и сохранить эффект.

Тем не менее, это все еще очень статично. Допустим, вы хотите нажать кнопку и заставить ее выполнить анимацию эластичного масштабирования. Нет проблем, одна анимация может использоваться снова и снова для каждой кнопки. Но допустим, вы хотите, чтобы элемент упруго привязывал его положение к тому месту, где пользователь недавно щелкнул или нажал на экране. В этом случае вам нужно динамически пересчитать ключевые кадры, а затем применить анимацию к элементу.

На момент написания этой статьи я не знал, что есть хорошие примеры динамического генерирования CSS-анимации на лету внутри javascript. На самом деле это, вероятно, оправдывает другой вопрос. В общем, это единственный чистый способ CSS, который я нашел, чтобы сделать сложное уравнение ослабления, такое как упругое ослабление, чисто с помощью CSS.

Источник

Вы можете использовать Цезарь для генерации CSS для различных уравнений.

Источник

На самом деле вам не нужна библиотека JavaScript для поддержки сложных функций замедления, таких как bounce-ease-in или эластичное облегчение. Вот инструмент CSS3 Animation Generator, который генерирует ключевые кадры для вас и включает 12 дополнительных функций замедления, не поддерживаемых спецификацией w3c:

http://www.css3animationgenerator.com/

Источник

Я знаю, что если вы используете mootools, вы можете написать собственное уравнение:

http://mootools.net/docs/core/Fx/Fx.Transitions

Класс: Fx.Transition

Этот класс полезен только для гениев-математиков, которые хотят написать свои собственные уравнения замедления. Возвращает функцию перехода Fx с методами easeIn, easeOut и easeInOut.

Возможно, другие библиотеки, такие как jquery или prototype, имеют такой же класс, возможно, они имеют что-то похожее.

Удачи!

Источник
Другие вопросы по тегам