В этом посте я покажу вам десять отличных, которые я нашел/встречал до сих пор.CSSБиблиотека анимации.
Я пробовал около 30, но эти десять - лучшее, что я нашел.
Обратите внимание, что эти библиотеки не нужно импортировать.JavaScriptпросто беги.
Еще раз: вся эта статья была написана на мобильном телефоне, поэтому, если вы просматриваете ее на компьютере или планшете, скриншоты ниже не будут выглядеть дружелюбно.
1.Animista
Недавно открыла для себя этот сайт, но сразу влюбилась в него. Честно говоря, это заслуживает того, чтобы быть воспитанным.
AnimastaЭто онлайн-генератор и библиотека, которая предоставляет вам следующие функции:
1. Богатые анимации на выбор
Вы можете выбрать тип анимации, который вам нравится (например, вход/выход), а также конкретный (например:scale-in) или даже выбрать другой вариант анимации (например:scale-in-right).
2. Настройка
AnimistaТакже предоставляет вам функцию, позволяющую настраивать определенные части анимации, например:
- продолжительность
- задерживать
- или направление
даже лучше,Вы можете выбрать, какие объекты анимировать, возможно:
- Простой центрированный квадрат
- характер
- задний план
- даже картинка
3. Получите код CSS
Выбрав анимацию, которая соответствует вашим потребностям, вы можете получить код прямо с веб-сайта.
Вы также можете выбрать сжатую версию кода.
4. Загрузите анимацию по вашему выбору
Еще одна удивительная особенность заключается в том, что вы можете поместить коды понравившихся вам анимаций в свой список и скачать только коды понравившихся вам анимаций. Или вы можете скопировать эти коды анимации вместе.
Еще лучше на этом сайте, он адаптивный, что означает, что вы можете использовать свой мобильный браузер прямо сейчас.
2.Animate CSS
Конечно, я должен также упомянутьAnimate CSS, возможно, это известная библиотека анимации.
Кратко опишу как им пользоваться.
1. Используйте
добавьте элемент, который вам нужно анимироватьanimatedИмя класса, а затем имя добавляемой анимации.
Например
<div class="animated slideInLeft"></div>
Если вы хотите, чтобы анимация была настойчивой, вы можете добавитьinfiniteclass, чтобы анимация повторялась снова и снова.
- через JavaScript
document.querySelector('.my-element').classList.add('animated', 'slideInLeft')
- через Jquery
$(".my-element").addClass("animated slideInLeft")
2. Дополнительные функции
Animate CSSПредоставляет вам несколько базовых классов для управления задержкой и скоростью анимации.
- задерживать
Вы можете сделать это, используяdelayкласс, чтобы задержать вашу анимацию.
<div class="animated slideInLeft delay-{1-5}"><div>
- скорость
Вы можете контролировать скорость анимации, добавляя классы в таблицу ниже.
| Class name | Speed time |
|---|---|
| slow | 2s |
| slower | 3s |
| fast | 800ms |
| faster | 500ms |
<div class="animated slideInLeft slow|slower|fast|faster"><div>
3.Vivify
Vivifyэто библиотека анимации, я всегда думал, что этоAnimate CSSусиленная версия . Он используется таким же образом, со своими дополнительными классами, но также расширен. Добавить кvivifyкласс в элемент вместоanimated. Например:
<div class="vivify slideInLeft"></div>
- Использовать Javascript
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
- использовать jQuery
$(".my-element").addClass("vivify slideInLeft")
подобноAnimate CSSТакой же,VivifyСуществуют также классы для управления продолжительностью и задержкой анимации.
Доступны классы задержки и продолжительности со следующими интервалами:
<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>
Примечание. Значения указаны в миллисекундах (мс). 1000 мс = 1 с
4.Magic Animations CSS3
В этой анимационной библиотеке есть несколько приятных и плавных анимаций, мне это особенно нравится.3Dанимация.
Нечего сказать, попробуйте сами и поиграйте с анимацией.
можете добавитьmagictime {animation_name}в свой элемент, например:
<div class="magictime fadeIn"></div>
- Использовать Javascript
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
- использовать jQuery
$(".my-element").addClass("magictime fadeIn")
5.cssanimation.io
cssanimation.ioЭто огромная коллекция различных анимаций, всего около 200, что довольно удивительно.
Если вы не можете найти анимацию, вы ищете здесь, вы не можете найти его нигде.
Он используется какanimista. Например, вы можете напрямую выбирать анимации и загружать их прямо с веб-сайта или загружать всю библиотеку.
использовать
добавить в свой элементcssanimation {animation_name}.
<div class="cssanimation fadeIn"></div>
- Использовать Javascript
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
- использовать jQuery
$(".my-element").addClass("cssanimation fadeIn")
Вы также можете добавитьinfiniteкласс, чтобы анимация продолжала повторяться.
<div class="cssanimation fadeIn infinite"></div>
также,cssanimations.ioПредоставляет вам возможность анимировать буквы. Для того, чтобы добиться этого, вам необходимоheadПредставлено на этикеткеletteranimation.jsфайл, затем в текстовый элемент добавьтеle{animation_name}.
<div class="cssanimation leSnake"></div>
Если вы хотите, чтобы анимация алфавита происходила упорядоченно, добавьтеsequenceКласс; если вы хотите, чтобы анимация алфавита происходила не по порядку, добавьтеrandomДобрый.
<div class="cssanimation leSnake {sequence|random}"></div>
6.Angrytools
Если вы используете генератор (Angrytoolsхорошо),Angrytoolsна самом деле коллекция, которая также включаетCSSгенератор анимации.
Это может быть не похоже наAnimistaТак сложно, но я нашел это великолепным. Сайт также предоставляет вам настраиваемые анимированные функции, такие как продолжительность и время задержки.
Но что мне нравится в этом, так это то, что вы можете добавить на временную шкалуkeyframes（关键帧）, и вы можете писать код прямо там. Кроме того, вы можете редактировать существующий эффект.
Вы можете получить готовый код после завершения анимации или загрузить его целиком.
7.Hover.css
Hover.cssмногочисленнаCSSКоллекция анимаций, в отличие от анимаций выше,каждый раз, когда элемент зависаетЭто будет запущено.
Набор эффектов наведения на основе CSS3, которые можно применять к ссылкам, кнопкам, логотипам, svg, изображениям и другим элементам.
В нем есть потрясающие анимации. И у него есть классы для анимированных иконок, таких как классные шрифты.
использовать
Его легко использовать: добавьте имя класса к своему элементу, например:
<button class="hvr-fade">Hover me!</button>
8.WickedCSS
WickedCSSмаленькийCSSВ библиотеке анимации не слишком много анимационных тел, но, по крайней мере, в ней есть отличные анимации. Большинство из них — это обычные анимации, с которыми мы знакомы, но они действительно хороши.
Очень прост в использовании, просто добавьте название вашего элемента анимации в строку.
<div class="bounceIn"></div>
- Использовать Javascript
document.querySelector('.my-element').classList.add('bounceIn')
- использовать jQuery
$(".my-element").addClass("bounceIn")
9.Three Dots
Three DotsдаCSSКоллекция анимаций загрузки, созданная всего из трех точек, состоящих из трех простых элементов.
использовать
Создаватьdivэлемент, затем добавьте имя анимации.
<div class="dot-elastic"></div>
10.CSShake
Наконец, приходите, чтобы встряхнуть дрожь.
Как следует из названия,CSShakeСодержит различные типы анимации дрожанияCSSБиблиотека анимации.
- использовать
Добавить кshake {animation_name}в свою стихию.
<div class="shake shake-hard"></div>
- Использовать Javascript
document.querySelector('.my-element').classList.add('shake','shake-hard')
- использовать jQuery
$(".my-element").addClass("shake shake-hard")
позже
- оригинал:Dev.to/Majestic Oh Bo/10-of-…
- Статья впервые опубликована:GitHub.com/still99/блог…
- больше контента:GitHub.com/still99/блог…