README

Font Awesome (及其他图标库) 的 CSS 动画。

状态

查看预览

快速开始

有几种选项可用

下载最新版本。
克隆仓库： git clone https://github.com/the-muda-organization/font-awesome-animations.git
使用 Composer 安装： composer require the-muda-organization/font-awesome-animations

包含内容

在下载中，您可以找到以下目录和文件，它们按逻辑分组常见的资产，并提供编译和压缩版本。您将看到如下内容

没有依赖项。库是为 Font Awesome 5 设计的。有关安装指南和如何使用的更多信息，请参阅下文。

fa-animations/
 │
 └─ dist/
    │
    ├── fa-animations.css
    └── fa-animations.min.css

错误和功能请求

如果您有任何错误或功能请求，请在创建新问题之前搜索现有和已关闭的问题。如果您的問題或想法尚未得到解决，请创建新问题。

安装

下载并将文件复制到您的项目中
将 CSS 添加到您的项目中

    <link href="https://example.com/fa-animations/1.x.x/fa-animations.min.css" rel="stylesheet">

即可使用！

如何使用

动画与任何 Font Awesome 前缀 fad、fal、far 和 fas 兼容。在其他图标库上未进行测试，但应该只需要少量或无需自定义即可工作。

此库不包括默认的 Font Awesome 动画：fa-spin 和 fa-pulse。

Font Awesome Animations 使用自定义类 .faa 或 .faa-parent 以及自定义前缀 faa-。

有两种类型的动画：常规和悬停。

A) 常规动画

将 faa 和 faa-animation-name 类添加到图标。

<i class="fad fa-camera faa faa-bounce"></i>
<i class="fal fa-camera faa faa-pulse"></i>
<i class="far fa-camera faa faa-shake-x"></i>
<i class="fas fa-camera faa faa-tada"></i>

B) 悬停动画

将 faa-animation-name 类添加到图标，并将 faa-parent 类添加到任何祖先元素。悬停以启动动画。

<div class="faa-parent">
    <i class="fas fa-camera faa-bounce"></i>
</div>

<div class="faa-parent">
    
    <!--ICON 1-->
    <div class="some-class">
        <i class="fas fa-camera faa-bounce"></i>
    </div>
    
    <!--ICON 2-->
    <i class="fas fa-angle-double-right faa-slide-right"></i>
 
</div>

可用动画

faa-bounce
faa-burst
faa-falling
faa-flash
faa-flip-x
faa-flip-y
faa-float
faa-pulse
faa-ring
faa-rubber-band
faa-slide-left
faa-slide-right
faa-shake-x
faa-shake-y
faa-swing
faa-tada

默认的 Font Awesome 动画 fa-spin 和 fa-pulse。

版本控制

尽可能根据语义版本控制指南维护 Font Awesome Animations。版本号将按照以下格式编号： <major>.<minor>.<patch>

变更日志

有关最新版本的信息，请参阅详细的变更日志。

团队

Jakub Muda

行为准则

如果你表现得很好，我们会表现得很好。有关更多详细信息，请参阅我们的行为准则。

版权和许可

代码在 MIT 许可下发布。

the-muda-organization / font-awesome-animations

维护者

详细信息