首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【译】推荐的十个CSS动画库

【译】推荐的十个CSS动画库

作者头像
Jimmy_is_jimmy
发布2020-01-15 15:47:22
6480
发布2020-01-15 15:47:22
举报
文章被收录于专栏:call_me_Rcall_me_R
banner
banner

在这篇文章中,我将向你展示目前为止,我发现/遇到的十个优秀的CSS动画库。

我大约尝试30种,但是这十种是我找到最好的。

请注意,这些库不需要引入JavaScript就可以运行。

再次提醒:整篇文章是通过手机编写的,所以,如果你在电脑或平板下查看,下面的截图看起来并不友好。

1.Animista

animista_cover
animista_cover

这个站点是我不久前才发现的,但是我立马爱上了她。实话说,它值得被提出。

Animasta是一款在线生成器也是一个库,为你提供下面的特性:

1.丰富的动画可供选择

你可以选择你喜欢的动画类型(比如:进入/退出),此外你也可以选择特定的一种(比如:scale-in),甚至,你可以为该动画选择不同的变化(比如:scale-in-right)。

various_animations
various_animations
2.定制化

Animista还为你提供了一项功能,允许你自定义动画的某部分,比如:

  • 持续时间
  • 延迟时间
  • 或者方向

更好的是,你可以选择设置动画的对象,它有可能是:

  • 一个简单的居中方块
  • 一个字符
  • 背景
  • 甚至一张图片
customization
customization
3.获取CSS代码

选择适合自己需要的动画后,你可以直接从网站种获取代码。

你也可以选择压缩版的代码。

get_css_code
get_css_code
4.下载选择的动画

另一个惊奇的功能是,你可以将喜欢的动画的代码放到你的列表中,并仅下载你喜欢的动画代码。或者你可以将这些动画代码复制到一起。

download_selected_animations
download_selected_animations

此站点上更好的是,它是响应式的,这意味着你现在就可以使用手机浏览器它。

2.Animate CSS

animate
animate

当然,我也必须提及Animate CSS,也许这是一个众所周知的动画库。

我将简单介绍如何使用它。

1.使用

在你需要添加动画的元素上添加animated类名,然后就是添加动画的名称。

比如

<div class="animated slideInLeft"></div>
复制代码

如果你希望动画是持久的,你可以添加infinite类,这样动画将不停地重复自身。

  • 通过 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
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>
复制代码

注意:值的单位是毫秒(ms)。1000ms = 1s

4.Magic Animations CSS3

magic_animations_css3
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
cssanimation

cssanimation.io是一大堆不同动画的集合,总共大约有200个,真是太神奇了。

如果在这里都找不到你想要的动画,那你在哪都找不到了。

它的使用方式类似animista。比如,你可以直接选择动画,然后直接从网站中获取,或者下载整个库。

get_cssanimation
get_cssanimation
使用

为你的元素添加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(关键帧),并且你可以直接在那里写代码。而且,你也可以编辑现有的一个效果。

angrytools
angrytools

你可以在完成动效后获取完成的代码,或者整个下载它。

7.Hover.css

Hover.css是众多CSS动画的集合,与上面的动画不同,每次将元素悬停时都会触发。

一组CSS3驱动的悬停效果,可以应用到链接,按钮,logos,svg,图片特性和其他。

它有一些惊人的动效。而且它还有用于动画图标的类,比如超棒的字体。

使用

使用很简单:将类名添加到你的元素中,比如:

<button class="hvr-fade">Hover me!</button>

8.WickedCSS

wickedcss
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
three_dots

Three DotsCSS加载动画的集合,仅由三个简单元素制作而成的三个点创建。

使用

创建一个div元素,然后添加动画名。

<div class="dot-elastic"></div>
复制代码

10.CSShake

csshake
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")

后话

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020年01月07日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.Animista
    • 1.丰富的动画可供选择
      • 2.定制化
        • 3.获取CSS代码
          • 4.下载选择的动画
          • 2.Animate CSS
            • 1.使用
              • 2.额外的特性
              • 3.Vivify
              • 4.Magic Animations CSS3
              • 5.cssanimation.io
                • 使用
                • 6.Angrytools
                • 7.Hover.css
                  • 使用
                  • 8.WickedCSS
                  • 9.Three Dots
                    • 使用
                    • 10.CSShake
                    • 后话
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档