操作animate.css的一些小技巧

animate.css是一个不错的css3动态样式文件,它利用keyframes封装了很多动态样式。具体的可以到官网查看
这里写图片描述
由于内容少而且方便操作,所以官网上竟然连教程都没有写;咋一看会有一种丈二和尚摸不着头脑。
编哥我也是摸索了一阵才领悟到的,所以我写个文章把一些操作和巧妙都记录下来,方便以后回顾!
1.用别人的东西肯定要拿过来嘛!所以第一步就是先把animate.css这个文件,拿到本地!
点击官网上的‘Download Animate.css ’然后把打开网页中的所有内容拷贝到本地新建的animate.css文件中。
2.再页面中引入animate.css这个文件,然后再需要做动态的元素中添加animated ‘你要的动画’

<img src="images/page1-title.png" class="page1-title animated bounceInDown" />

这样基本就可以,成功调用了。
3.但是当你想控制某些元素的动画时间、动画延迟触发、动画触发次数、动画循环的时候,就需要对css3的animate有所了解

    .page1-title{
        animation-duration: 2s;//一次播放动画的时间
        animation-delay: 0s;//延迟多久开始播放动画
        animation-iteration-count: 1;//动画播放多少次(infinite代表无限循环)
    }

4.当然你如果对官方给出的某个动画不喜欢的话也是可以对它进行动画修改的!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值