学习animate.css包含了一组炫酷、有趣、跨浏览器的动画

时间:2023-01-12 11:05:47

1、animate.css包含了一组炫酷、有趣、跨浏览器的动画,可以在你的项目中直接使用。

第一步:引入animate.css样式文件或者引入某些平台的CDN文件:

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

第二步:在HTML标签中添加animate提供的class类名:

<h1 class="animated infinite fadeInLeft delay-2s slow">Example</h1>

其中animated类是必须要添加的;

接着添加需要执行的动画类名,例如上面例子使用的:fadeInLeft(从左边淡入),当然还有很多其他的动画类名:animated类名

如果某个动画效果需要无线重复运行可以加上infinite类名,这样动画效果就会一直重复执行;

需要延迟执行某个动画效果可以加上对应的delay-2s类名,这里表示延迟2秒运行动画效果,当然还有其他的延迟类名:延迟效果类名

如果要控制某个动画效果的运行时间长短或者快慢可以加上对应的slow类名,这里表示动画从开始到结束运行2秒,当然还有其他的动画运行速度类名:动画运行速度类名

以上内容是自己学习animated这个动画插件的成果,希望对正在学习的您有所帮助,谢谢。

附上animated插件作者的github地址:https://github.com/daneden/animate.css

打开支付宝首页搜索“” 立即领红包