资讯专栏INFORMATION COLUMN

Animate.css介绍

番茄西红柿 / 612人阅读

摘要:简介动画库,预设了抖动闪烁弹跳翻转旋转淡入淡出等多达多种动画效果,几乎包含了所有常见的动画效果。

Animate.css简介

animate.css 动画库,预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。

Animate.css下载

百度云盘下载链接

Animate.css动画演示

演示地址

Animate模板

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  
  <link rel="stylesheet" href="css/animate.min.css"/>
head>
<body>

body>
html>
  • 添加一个动画


<div class="animated bounce">
  Animate.css
div>
  • 定义播放次数

<div class="animated bounce infinite">
  Animate.css
div>
  • 通过JavaScript或jQuery添加Animate动画
<div>
  Animate.css
div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js">script>

<script>
   $(div).addClass(animated bounce);
script>
  •  添加定时器,5秒后删除animate无限播放效果
<div>
  Animate.css
div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js">script>

<script>
   $(div).addClass(animated bounce infinite);
   setTimeout(function(){
     $("div").removeClass("infinite");
   },5000)
script>

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2307.html

相关文章

  • css3 动画(四)animation.css 源码分析

    摘要:前言上一篇动画三简介中只是简单的介绍了一下的子属性,并没有真正的使用。在本篇中,通过阅读这个的动画库,来加深对的属性的理解。是一个具有非常多的动画效果的动画库。动画效果演示用法加上基础类以及动画类,就会有闪烁的动画效果。 前言 上一篇 css3 动画(三)animation 简介 中只是简单的介绍了一下 animation 的子属性,并没有真正的使用。在本篇中,通过阅读 animate...

    ThreeWords 评论0 收藏0
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(上)

    摘要:在离开过渡被触发时生效,在完成之后移除。可以链式的多次使用和用法相同,但是的元素会始终渲染并保存在中,只是改变值。用法如下对应前面的数据 在我一生的黄金时代,我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云。                                   ——王小波上一章研究了vue中组件的通信,算是对vue的组件通信有了大致的了解。综合上三章对搭建项...

    zhaochunqi 评论0 收藏0
  • 移动Web利器transformjs入门

    摘要:更别提配合一些运动或者时间的库来编程了。姿势封装了一大堆关键帧动画,开发者只需要关心添加或者移除相关的动画的便可以。 简介 在过去的两年,越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候,都使用了transformjs,所有必要介绍一下,让更多的人受益,提高编程效率,并享受编程乐趣。(当然transformjs不仅仅支持移动设备,支持CSS3 3D Transforms的...

    mrcode 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<