可能是最强大的 CSS 动画库!

源码共读

共 2285字,需浏览 5分钟

 ·

2021-04-28 11:05

👇👇关注后回复 “进群” ,拉你进程序员交流群👇👇

作者丨李鱼皮

来源丨编程导航


强大易用的跨平台的预设 CSS3 动画库推荐


在前端开发中,想让页面变得更生动自然,往往需要添加一些小动画,比如渐隐渐现、摇摆等。

通过 CSS3 提供的 keyframes 规则,我们可以自己实现各种各样复杂的动画效果。但是很多同学可能对动画开发并不熟悉,简单的动画代码倒是还能写一点,但是要做出自然顺滑的动画,需要的不止是代码功底,更需要设计能力和经验。

比如弹跳动画,代码类似这样:

@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-functioncubic-bezier(0.2150.610.3551);
    animation-timing-functioncubic-bezier(0.2150.610.3551);
    -webkit-transformtranslate3d(000);
    transformtranslate3d(000);
  }
  40%,
  43% {
    -webkit-animation-timing-functioncubic-bezier(0.7550.050.8550.06);
    animation-timing-functioncubic-bezier(0.7550.050.8550.06);
    -webkit-transformtranslate3d(0, -30px0scaleY(1.1);
    transformtranslate3d(0, -30px0scaleY(1.1);
  }
  ...
}

上述代码中使用了不少贝塞尔曲线函数,再加上各种系数,看着就非常复杂。

还好有一个非常强大的开源 CSS 动画库 Animate.css,内置了很多常用的 CSS3 动画,兼容性好使用方便,并且整个文件非常轻小,只有几十 k!

使用方式非常简单,比如我们要给某段文字添加一个弹跳动画,首先引入 Animate.css 样式文件,在生产环境中建议引入压缩过的 min 文件,还可以使用 CDN 进行加速。

引入代码如下:

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

第二步,进入 Animate.css 提供的动画演示站点,选择自己想要的动画效果。演示网站非常贴心,点击标签后,能够立刻查看到动画效果,方便选择。

查看动画演示

第三步,给你想要添加动画的 html 元素加上 "animated" 和上一步中选中的动画样式名称即可:

 <div class="animated fadeInUp"></div>

Animate.css 本身是纯 CSS 实现,不支持动态添加类名,所以想要给某元素动态添加样式(比如点击后弹跳),需要配合 JavaScript 或 jQuery 实现。

最后,对于想要学习 CSS 动画的同学,Animate.css 的源码也非常值得一看哦!

-End-

最近有一些小伙伴,让我帮忙找一些 面试题 资料,于是我翻遍了收藏的 5T 资料后,汇总整理出来,可以说是程序员面试必备!所有资料都整理到网盘了,欢迎下载!

点击👆卡片,关注后回复【面试题】即可获取

在看点这里好文分享给更多人↓↓

浏览 15
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报