С появлением CSS3 у нас появилась возможность использовать анимированные эффекты при наведении и другие переходы. Эти переходы могут быть реализованы при помощи так называемых эффектов замедления. Эти эффекты отличаются тем, каким образом они начинаются, каким образом они ускоряются, замедляются или останавливают анимацию. Веб-сайт Easings.net собрали большой обзор доступных эффектов. Кроме этого, ребята представили некоторые дополнительные эффекты, подкрепленные исходным кодом.
Что касается стандартных эффектов CSS3, то мы можем использовать заранее установленные, а также более или менее упрощенные эффекты ease-in и ease-out. Если вы готовы работать с более сложными анимациями, CSS3 позволяет вам создавать их при помощи индивидуальной кривой Безье.
Easings.net собрали галерею содержащую 40 различных анимационных эффектов, которые раздвигают рамки стандартных эффектов. Каждый отдельный эффект укомплектован превью, где вы можете увидеть кривую Безье в действии. Действие может быть предварительно просмотрено. Если вы хотите интегрировать эффект в ваш проект, то Easings.net позволяет вам скопировать и вставить необходимый код.
Эффект замедления для CSS3 + jQuery-плагин
Эффект замедления полностью полагается на CSS3, и позволяет вам использовать простые кривые Безье. Что касается более сложных операций, включая эластичность, то здесь нам понадобится javascript. Ресурс Easings.net предлагает нам не только кривые Безье для CSS3, но также и корректный исходный код для вспомогательного jQuery-плагина Easing, который позволяет вам создавать более сложные анимации. Плагин содержит все эффекты замедления, предоставленные на сайте. Таким образом, все, что вам потребуется, это использовать название эффекта.
Эффекты замедления для SASS
Easings.net на этом не остановились. Кроме поддержки CSS3 и jQuery, разработчики также предложили нам специальное издания для среды разработки Compass под названием Ceaser Easing Animation. Это расширение позволяет использовать заранее подготовленные эффекты без необходимости выставлять кривую Безье.
Завершение
Easings.net предлагает нам расширенную подборку различных эффектов замедления, включая необходимый код для встраивания эффектов на сайт.
Раздел: Java-Скрипты Нет комментариев
Easings.net – CSS3-анимации трансформеры
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Подробности здесь
Опубликовал Design FactoRy Прочитано (раз): 5662 | Нет комментариев
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать