操作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.当然你如果对官方给出的某个动画不喜欢的话也是可以对它进行动画修改的!

猜你喜欢

转载自blog.csdn.net/a419419/article/details/80044770