本文首发于https://www.1024nav.com/tools/css-animation-library 转载请注明出处

整理了日常前端开发中常用的css动画库，让你的网页动起来，可以在生成中使用，非常酷炫，值得收藏

animxyz

AnimXYZ 可帮助您为网站创建、自定义和合成动画。由 CSS 变量提供支持，允许几乎无限数量的独特动画而无需编写单个关键帧。节省时间并完全控制元素的移动方式。为 Vue、React、SCSS 和 CSS 构建，AnimXYZ 将使您的网站栩栩如生。

官网地址：https://animxyz.com/

Izmir 图片hover动画效果

Izmir 是一个迷你 CSS 库，可让您快速创建漂亮的图像悬停元素。包含大量样式类和自定义属性，伊兹密尔允许您完全控制和几乎无限的可能性。只需将 CSS 库加载到您的项目中，添加元素标记并结合您选择的样式类来自定义构建您完美的图像悬停效果。

GITHUB地址：https://github.com/ciar4n/Izmir

官网地址：https://ciar4n.com/izmir/

Animatopy

集成了animate.css，但是更加简单，更加灵活，更加方便。只需要拷贝所需代码即可

官网地址：https://sarthology.github.io/Animatopy/

3个CSS动画库，比Animated还好用，让你的网站酷炫起来的更多相关文章

  1. Animate.css动画库，简单的使用，以及源码剖析

    animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...

  2. 048——VUE中使用animate.css动画库控制vue.js过渡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. uni-app引入css动画库

    引入Animate动画库 Animate中文网地址:http://www.animate.net.cn/ Animate下载地址:https://daneden.github.io/animate.c ...

  4. 八个解决你80%需求的CSS动画库

    八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试试这8个CSS动画库, ...

  5. css动画库

    转载自:http://www.cnblogs.com/starof/p/4968769.html 本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方 ...

  6. 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  7. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  8. （生产）animate.css 动画库

    官网:https://daneden.github.io/animate.css/ Animate.css是一个有趣的,跨浏览器的css3动画库 用法 首先引入animate css文件:    &l ...

  9. CSS动画库——animate.css的使用

    Animate.css是一款强大的CSS3动画库 官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...

随机推荐

  1. OO第三单元——JML规格化设计

    OO第三单元--JML规格化设计 JML语言的理论基础以及应用工具链情况 理论基础 JML是对JAVA程序进行规格化设计的一种表示语言,是一种行为接口规格语言.JML整合了Java和JAVAdoc,并 ...

  2. springboot多配置环境

    在我们的开发过程中,经常会有多套配置环境,比如开发环境(dev),测试环境(test),生产环境(prod)等,在各个环境中我们需要使用到不同的配置,那么在springboot中是如何做到的呢? 1. ...

  3. QMake（Qt项目构建）

    qmake工具能够简化不同平台上的项目构建.可以自动产生Makefiles文件,仅仅需要少量的信息就可以生成Makefile文件.同时qmake也可以构建不是Qt的项目.qmake基于项目文件中的信息 ...

  4. 转载：10G以太网光口与Aurora接口回环实验

    10G以太网光口与高速串行接口的使用越来越普遍,本文拟通过一个简单的回环实验,来说明在常见的接口调试中需要注意的事项.各种Xilinx FPGA接口学习的秘诀:Example Design.欢迎探讨. ...

  5. 替换空格 牛客网 剑指Offer

    替换空格 牛客网 剑指Offer 题目描述 请实现一个函数,将一个字符串中的每个空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20A ...

  6. Ubuntu Python2 和 Python3 共存 切换

    例如 你写了代码 创建一个文件 在终端 vim test.py 然后写入代码 print "hello world" 接着运行代码 python test.py 会输出 hello ...

  7. Bzoj P2212 [Poi2011]Tree Rotations | 线段树合并

    题目链接 通过观察与思考,我们可以发现,交换一个结点的两棵子树,只对这两棵子树内的节点的逆序对个数有影响,对这两棵子树以外的节点是没有影响的.嗯,然后呢?(っ•̀ω•́)っ 然后,我们就可以对于每一个 ...

  8. Luogu P1118 [USACO06FEB]数字三角形 Backward Digit Sums | 搜索、数学

    题目链接 思路:设一开始的n个数为a1.a2.a3...an,一步一步合并就可以用a1..an表示出最后剩下来的数,不难发现其中a1..an的系数恰好就是第n层杨辉三角中的数.所以我们可以先处理出第n ...

  9. hdu 3199 Hamming Problem（构造？枚举？）

    题意: For each three prime numbers p1, p2 and p3, let's define Hamming sequence Hi(p1, p2, p3), i=1, . ...

  10. docker+nginx搭建tomcat集群（附录）——nginx.conf文件

    附录:nginx.conf修改后的文件内容 user root;worker_processes 2; #error_log logs/error.log;#error_log logs/error. ...