Бордер (border) анимация на чистом CSS

На ресурсе GitHub можно найти очень много креативных, интересных и полезных плагинов, написанных на разных языках программирования. На своем блоге я уже о многих рассказывал, делал обзоры. И сегодня хочу осветить еще один, с помощью которого легко сделать border анимацию.

Pure-CSS3-Animated-Border

Плагин представляет из себя небольшую библиотеку с более чем 40 эффектов border анимации. Поддерживается всеми современными браузерами, в том числе Internet Explorer начиная с 10 версии. Все что нужно для работы, так это подключить один файл стилей и для любого элемента, где хотели бы видеть бордер анимацию, достаточно добавить необходимый класс.

демо скачать

Подключение

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/code-fx/Pure-CSS3-Animated-Border@V1.0/css/animated-border/animated-border.min.css" />

На WordPress лучше всего подключить стили через файл functions.php. Делается это так.

// бордер анимация
function wsborder_styles() {
        wp_register_style('border-ani', 'https://cdn.jsdelivr.net/gh/code-fx/Pure-CSS3-Animated-Border@V1.0/css/animated-border/animated-border.min.css', array(), '1.0');
    wp_enqueue_style('border-ani');
};
add_action( 'wp_enqueue_scripts', 'wsborder_styles' );
/* end */

Пример использования

После подключения библиотеке осталось добавить класс к любым элементам.

<a href="#" class="ui-box top-leftToRight">
  Бордер анимация гиперссылки
</a>

<div class="ui-box bottom-rightToLeft">
  Анимация DIV блока
</div>

<button class="ui-box left-bottomToTop">
  Анимация тега Button
</button>
<p class="ui-box right-topToBottom">
  Анимация параграфа
</p>

4 линейная анимация border

Конструкция 4 линейной анимации чуток отличается от однолинейной. Требуется добавить еще тег span.

<a href="#" class="ui-box top-leftStart">
  <span class='ui-border-element'>
    Animated Hyperlink
  </span>
</a>

Редактирование

Вдруг понадобиться изменить цвет, толщину, эффект бордера, то это можно сделать через те же классы. Если изменения не заработают, попробуйте добавить значение !important.

.top-leftToRight:before{
    border-top: 5px solid red;
    transition-timing-function: linear;
}

Список всех классов