Animate.css 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Animate.css 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Animate.css 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 HTML/CSS 查看源码 »
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发CSS框架
开源组织
地区 不详
投 递 者 小编辑
适用人群 未知
收录时间 2012-04-19

软件简介

Animate.css 是一个有趣的,跨浏览器的 css3 动画库,内置了很多典型的 css3 动画,兼容性好使用方便。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
2015/12/11 13:36

animate.css简介

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。 虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西。 兼容 浏览器兼容:当然是只兼容支持 CSS3 animate 属性的浏览...

0
1
2016/01/12 21:27

Animate.css 纯CSS动画库

github上的地址是: https://daneden.github.io/animate.css/ Animate.css Just-add-water CSS animation animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. 基本的使用方法 引入css文件到 <head> 标签中 <head> <link rel="stylesheet" href="animate.min.css"> </head> 给你想让执行...

0
7
发表于大前端专区
2016/05/27 17:25

animate

改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({height:"300px"}); }); 定义和用法 animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。 只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。 注释:使用 "+=" 或 "-=" 来创建相对动画(relative an...

0
0
发表了博客
2015/07/30 14:58

关于animate

var sum = { left:function(e,m,t){//纵向移动; $(e).animate({ left:m },t); }, top:function(e,m,t){//横向移动; $(e).animate({ top:m },t); }, leftTop:function(e,w,h,t){//左上角为起始点; $(e).animate({ width:w, height:h },t); } }; //动画方向选择及调用; function selectFun(x){ var fx = x.select; switch (fx){ case "left": sum.left(x.e,x.m,x.t); break; case "top": sum.top(x.e,x.m,x.t); break; case "left...

0
1
发表了博客
2015/01/06 21:27

jquery04-animate

<script type="text/javascript"> $(function(){     /* $(".topicList h3").click("click",function(){         var uln=$(this).next("ul");         if(uln.css("display")=="none"){             uln.css("display","block");         }else{             uln.css("display","none");         }     }); */          /* $(".topicList h3"...

0
0
发表了博客
2018/07/11 15:04

jQuery-动画animate() 方法操作 CSS 属性

语法: $(selector).animate({params},speed,callback); 多个params 之间用逗号(,)隔开。 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。 例如: $(document).ready(function() { $("button").click(function() { $(".div").animate({ left:'250px', heig...

0
0
发表于大前端专区
2016/07/18 15:02

CSS3———— animate(),transtion,transfrom.translate()

animate() 函数用于执行一个基于css属性的自定义动画。 你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画. 例如:某个div元素的当前高度为100px,将其CSS height属性设为200px,animate()将会执行一个将div元素的高度从100px逐渐增加到200px的过渡动画。 语法: (selector).animate({styles},speed,easing,callback) 复杂动画: 1定义动画名: @keyframes mymove{ 0%{} .. 5...

0
0
发表于大前端专区
2015/08/06 17:00

CSS3 @keyframes animate

1.@keyframes定义和用法 通过 @keyframes 规则,您能够创建动画。 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中,您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。 0% 是动画的开始时间,100% 动画的结束时间。 为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。 注释:请使用动画属性来控制动画的外观,同时将动画与...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了问答
2015/07/29 09:11

用animate.min.css出现闪屏问题

利用用animate.min.css写动画效果,比如说加载到一个界面时先一片空白然后某些元素淡入,现在的问题是所有的元素都显示出来,然后才开始动画,所以就出现了闪屏的问题,请各位大神支招

3
0
发表了问答
2015/06/07 20:51

Animate.css 应用于整个表单后,表单元素原生功能失效

最近在做一个微信浏览器中的活动页面,要求翻页时有卡片式动画,于是选用 Animate.css 作为动画效果库。 因为这个动画库把 CSS 3 Key-Frame 封装成以动效命名的 CSS 类,所以实现炫酷的翻页动画并没花多少时间,但却遇到一个非常奇葩的 Bug —— 翻页动画结束后,最后一页中的 所有表单元素 原生功能失效 —— 微信、UC 等老版 WebKit 内核尚可在点击文本框时弹出输入法(但接收不到任何输入),最新桌面版 Chrome 的 移动开发模...

1
0
发表了问答
2014/06/09 17:24

animate.css动画 循环播放出现衔接不上的问题.感觉有卡顿

.hinge { -webkit-animation-name: hinge; animation-name: hinge; -webkit-animation-iteration-count:10; animation-iteration-count:10; } @-webkit-keyframes hinge { 1% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20% { -web...

1
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
0 评论
92 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部