Animate.css介绍

番茄西红柿发布于2019-04-23 13:46 / 583人阅读

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

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>

GPU云服务器云服务器自我介绍平台介绍相关介绍指令介绍

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

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

css3 动画（四）animation.css 源码分析

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

ThreeWords 2019-08-29 16:05 评论0 收藏0
vue2.0开发聊天程序(四) 完整体验一次Vue开发（上）

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

zhaochunqi 2019-08-20 13:29 评论0 收藏0
移动Web利器transformjs入门

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

mrcode 2019-08-30 13:08 评论0 收藏0