Отрывающийся текст / Эффекты / Сниппеты Bootstrap

Отрывающийся текст

Анимационный эффект с применением свойств animation и transform из CSS3 для Bootstrap, текст сначала отрывается правой частью, а затем полностью и падает.

* Подобный эффект может быть применён не только к тексту но и к другим элементам, чтобы изменить повторение анимации измените значение infinite в свойстве animation.

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Эффекты

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 221

Количество символов:

Посмотрели: 2064 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.3 / 5 - 6 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: эффект, Snippet, Effect, текст, Bootstrap, анимация, анимировать, ANIMATE, бутстрап, animation

Поделился: BootstrapТема

Добавлено: 2015-12-03 в 21:14

Метка: 1582118757

⇄ ⇅

@-webkit-keyframes the-gap {
 from, 15% {
 -webkit-transform: rotate(0) translateX(0);
 transform: rotate(0) translateX(0);
 opacity: 1;
 -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
 animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
 }
 50%,
 60% {
 -webkit-transform: rotate(90deg) translateX(0);
 transform: rotate(90deg) translateX(0);
 opacity: 1;
 -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
 animation-timing-function: cubic-bezier(.13, .84, .82, 1);
 }
 85%,
 to {
 -webkit-transform: rotate(90deg) translateX(200px);
 transform: rotate(90deg) translateX(200px);
 opacity: 0;
 }
}

@keyframes the-gap {
 from, 15% {
 -webkit-transform: rotate(0) translateX(0);
 transform: rotate(0) translateX(0);
 opacity: 1;
 -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
 animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
 }
 50%,
 60% {
 -webkit-transform: rotate(90deg) translateX(0);
 transform: rotate(90deg) translateX(0);
 opacity: 1;
 -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
 animation-timing-function: cubic-bezier(.13, .84, .82, 1);
 }
 85%,
 to {
 -webkit-transform: rotate(90deg) translateX(200px);
 transform: rotate(90deg) translateX(200px);
 opacity: 0;
 }
}
</style>

<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="text-center"><h1 class="logo">BootstrapТема</h1></div>
</div>
</div>
</div>

BootstrapTema

Отрывающийся текст

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0