Animate.css

使用

  • 1.github中搜索animate.css


  • 2.下载下来


  • 3.在html中引用动画库
< head >
  < link  rel = “ stylesheet ”  href = “ animate.min.css ” >
</ head >

语法（实现动画效果）

  • 例子：
//将类animated添加到要动画的元素
//最后，您需要添加实现动画效果的类
<style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
        }
    </style>
<body>
<div class="animated slideInRight"></div>
</body>
  • 封装好的动画类名有很多，不会一一去记，所以：

  • 搜索最牛前端，点击进入前端人的俱乐部


  • 点击选择左侧的“框架/库”然后再选择右侧中“动画库”里面的“Animate”

  • 查看需要什么样的动画


内容

  • 定制
  • 就是在原有的基础上进行定制
.animated {
            animation-duration: 5s;
            animation-fill-mode: both;
        }
//在样式中给animate进行自定义设置动画时长
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容