animation.css如何使用?

animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。

animate里面包含了许多常用的css动画,我们要使用的它的话需要把它加到自己的页面中,接着就可以在需要动画的元素标签上直接调用里面的动画,然后调节动画次数延迟等达到自己需要的效果就可以了。

示例:

1、在文件夹中放入animate的css文件,以及一个html文件。

1.png

2、在html的头部添加我们的animate文件。

2.png

3、在需要动画的标签上添加 class="animated bounce delay-3s",延迟3秒后播放animate中的bounce上下跳动动画。

3.png

4、在中间添加个infinite就可以循环播放动画。

4.png

5、我们还可以 自己添加class样式,在里面设置播放速度5秒,延迟2秒,循环播放,把定义好的 直接写到标签class前面 就可以了。

5.png

6、如果要设置播放次数,可以把infinite修改为2,就是播放两次。

6.png

7、在浏览器打开就可以看到文字跳动的动画了,其它的动画同样如此使用,只需要修改动画名字就可以了。

7.png

8.png

更多web开发知识,请查阅 HTML中文网 !!

以上就是animation.css如何使用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏