复制代码
Vivify是一个动画库,我一直以为它是Animate CSS的增强版。它的使用一样,有自己更多的类,但是也扩展了些。添加vivify类到元素中,而不是animated。比如:
复制代码
使用 Javascript
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
复制代码
使用 Jquery
$(".my-element").addClass("vivify slideInLeft")
复制代码
就像Animate CSS一样,Vivify也为你提供了一些类来控制动画的持续时间和延迟时间。
延迟和持续时间的类在下面的间隔中可用:
复制代码
注意:值的单位是毫秒(ms)。1000ms = 1s
这个动画库有些不错并且流畅的动画,我特别喜欢3D动画。
没什么好说的,自己去尝试下,玩下动画。
你可以添加magictime {animation_name}到你的元素中,如下:
复制代码
使用 Javascript
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
复制代码
使用 Jquery
$(".my-element").addClass("magictime fadeIn")
复制代码
cssanimation.io是一大堆不同动画的集合,总共大约有200个,真是太神奇了。
如果在这里都找不到你想要的动画,那你在哪都找不到了。
它的使用方式类似animista。比如,你可以直接选择动画,然后直接从网站中获取,或者下载整个库。
使用
为你的元素添加cssanimation {animation_name}。
复制代码
使用 Javascript
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
复制代码
使用 Jquery
$(".my-element").addClass("cssanimation fadeIn")
复制代码
你也可以添加infinite类,以便动画不断重复。
复制代码
此外,cssanimations.io为你提供了动画字母的功能。为了实现这个,你需要在head标签中引入letteranimation.js文件,然后在你的文本元素中添加le{animation_name}。
复制代码
想要字母动画有序进行,添加sequence类;想要字母动画无序进行,添加random类。
复制代码
如果使用生成器(Angrytools不错),Angrytools实际上是一个集合,其中还包括CSS动画生成器。
它可能不像Animista那么复杂,但是我发现这个也很棒。这个网站也为你提供了定制动画的功能,比如持续时间和延迟时间。
但是我喜欢它的是,你可以在时间线上添加keyframes(关键帧),并且你可以直接在那里写代码。而且,你也可以编辑现有的一个效果。
你可以在完成动效后获取完成的代码,或者整个下载它。
Hover.css是众多CSS动画的集合,与上面的动画不同,每次将元素悬停时都会触发。
一组CSS3驱动的悬停效果,可以应用到链接,按钮,logos,svg,图片特性和其他。
它有一些惊人的动效。而且它还有用于动画图标的类,比如超棒的字体。
使用
使用很简单:将类名添加到你的元素中,比如:
Hover me!
复制代码
WickedCSS是一个小型的CSS动画库,没有太多的动画体,但是它至少有很棒的动画。它们中大多数是我们熟悉的基本动画,但是它们真是很简洁。
使用方法很简单,只要为你的元素添加动画名就行了。
复制代码
使用 Javascript
document.querySelector('.my-element').classList.add('bounceIn')
复制代码
使用 Jquery
$(".my-element").addClass("bounceIn")
复制代码
Three Dots是CSS加载动画的集合,仅由三个简单元素制作而成的三个点创建。
使用
创建一个div元素,然后添加动画名。
复制代码
最后,来点摇晃的抖动。
如其名,CSShake包含了不同类型的抖动动画的CSS动画库。
使用
添加shake {animation_name}到你的元素中。
复制代码
使用 Javascript
document.querySelector('.my-element').classList.add('shake','shake-hard')
复制代码
使用 Jquery
$(".my-element").addClass("shake shake-hard")
复制代码
后话