animte.css的使用,快速搭建动画

动画特效是网页中很重要的组成部分,一个绚丽 的网页效果能吸引很多游客观看,游客最后也会成为你网站的常住客人。

css3中的动画效果使用 frames 进行书写 

关于 css3中的简单动画的实现 我之前有讲过 

https://blog.csdn.net/yunchong_zhao/article/details/104268251

当然在实际的项目中特别是工作中需要完成一些有难度的动画效果。如果让我们自己写的话,如果你没有很好地数学基础的话,真的很难的。

这个时候就需要css动画的插件库

animate.css  里面封装了很多 实用的动画效果

https://daneden.github.io/animate.css/

然后就是在实际的使用

进入官网之后  鼠标选中 Download Animate.css 右键 另存为  获取到 animate.min.css

在你的项目上引入 css

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

<div></div>

div{
            height: 140px;
            width: 300px;
            background-color: #f00;
            margin: 50px auto;
            animation:hinge 3s;   // 注册 动画  前面 是动画名称  hinge   3s 是动画持续时间
        }