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

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

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

转载于:https://www.cnblogs.com/hool/p/10761073.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值