自己整理的css3动画库,附下载链接

动画调用语法
animation: bounceIn 0.3s ease 0.2s 1 both;
按顺序解释参数:
动画名称 如:bounceIn
一周期所用时间 如:0.3s
速度曲线 如:ease
描述
linear
动画从头到尾的速度是相同的。
ease
默认。动画以低速开始,然后加快,在结束前变慢。
ease-in
动画以低速开始。
ease-out
动画以低速结束。
ease-in-out
动画以低速开始和结束。
cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
动画开始时间 如: 0.2s
播放次数 如:1 如果要一直循环就设置 infinite
动画在播放之前或之后,其动画效果是否可见 如:both
描述
none
不改变默认行为。
forwards
当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards
在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both
向前和向后填充模式都被应用。
兼容性设置动画
-webkit-animation:bounceInDown 0.3s ease 0.2s 1 both;
-moz-animation:bounceInDown 0.3s ease 0.2s 1 both;
-ms-animation:bounceInDown 0.3s ease 0.2s 1 both;
-o-animation:bounceInDown 0.3s ease 0.2s 1 both;
animation: bounceInDown 0.3s ease 0.2s 1 both;
本css中的动画效果
vanishIn 中心缩小的模糊变清楚后显示
vanishOut 中心放大清楚变模糊后消失
twisterInUp 从右侧螺旋转进来放大
slideUp 向上移动
slideDown 向下移动
puffOut 中心放大清楚变粒子后消失
puffIn 从外向中心缩小出现
twisterInDown 从左侧螺旋转进来放大
rollIn 从左侧翻滚进来
lightSpeedIn 从右侧光速进入
lightSpeedOut 光速出去
fadeIn 原地淡入·
fadeOut 原地淡出
fadeInLeft 从左侧移入,淡入
fadeInRight 从右侧移入,淡入
fadeInDown 从上方移入,淡入
fadeInUp 从下方移入,淡入
fadeOutDown 向下移出,淡出
fadeOutLeft 向左移出,淡出
fadeOutRight 向右移出,淡出
fadeOutUp 向上移出,淡出
swing 扭动摇晃
wobble 左右大幅度摇晃
rotateIn 旋转360度
flip 横向翻转
zoomIn 中心放大显示
zoomOut 向中心缩小消失
bounceIn 从中心扩大弹出显示
bounceInLeft 从左侧弹入
bounceInRight 从右侧弹入
bounceInUp 向上弹入
bounceInDown 向下弹入
bounceOut 向中心弹出消失
bounceOutDown 向下弹消失
bounceOutLeft 向左弹消失
bounceOutRight 向右弹消失
bounceOutUp 向上弹消失
rollOut 向右滚出消失
rubberBand 原地弹性弹一下
heartbeat 原地像心跳一样弹一下
flipOutY y轴翻转消失
flipInX x轴翻转显示
flipInY y轴翻转显示
flipOutX x轴翻转消失
tada 原地抖动
jello 原地斜向抖动
flash 原地闪烁
pulse 原地轻微放大后还原
sharp 模糊到清楚显现
scaleUp 原地放大
scaleDown 原地缩小
blur 原地变模糊保持模糊状态
start 闪现一下消失
rightflip 闪现一下向右消失
shake 原地抖动
hinge 剥落
boingInUp 向前荡入
holeOut 缩小翻转收走
最后附: 下载连接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370003.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

带有Spring的REST的ETag

1.概述 本文将重点介绍ETags-Spring支持,RESTful API的集成测试以及带有curl的使用场景。 这是关于使用Spring 3.1和Spring Security 3.1和基于Java的配置来建立安全的RESTful Web服务的系列文章的第9篇。 REST with Spring系列: 第1部分 – 使用Spring…

html5与css3都要学吗,前端要学css3吗?

前端要学css3;HTML5、CSS3是前端工程师必须要学会。现在移动端的兴起,导致web前端开发的技术逐变向css3和html5转变,所以css3一定要学。CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了…

PHP中cookie和session的区别

1、cookie数据存放在客户的浏览器上,session数据放在服务器上。 2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。 3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器…

ubuntu下anaconda3+pygame

有是很无语的地方,网上教程一堆,又是要下载什么包,然后又是什么依赖乱七八糟的整一堆。都不知道怎么想的 试了 sudo apt-get install python-pygame 这个是行不通的!!!根本没有任何卵用 害我捯饬了半天&am…

react 判断图片是否加载完成_React中型项目的优化实践

项目介绍整个项目大概有60个页面,用到的组件大概150,package里面的依赖大概有70个,应该勉强算得上是一个中型的React的项目了。下面给大家看看我们现在build一次项目的结果--打包时间约150s,打包完之后的资源gzip之后约1.2m&#…

搭建本地wordpress

1.首先,下载xampp,安装按默认勾选即可。 2.安装完成后,启动Apache和MySQL这两个服务。 启动后变成绿色,表示启动成功。 3.点击MySQL项的Admin进入数据库后台。 4.点击用户账户新建用户。 5.填写用户名,host name选本地…

编写Java批注

Java 批注的允许的属性类型刻意非常严格,但是允许的类型也可以使用一些简洁的复合批注类型。 考虑教程站点中的示例注释: package annotation; interface ClassPreamble {String author();String[] reviewers(); }在这里,作者和审阅者具有St…

Python基础【day02】:字符串(四)

在Python中字符串本身有带很多操作,字符串的特性,不可以被修改 0、字符串常用功能汇总 1、字符串的定义 #定义空字符串>>> name#定义非空字符串 >>> name"luoahong"#通过下标访问 >>> name[1] u#不能修改字符串的值…

cryptojs vue 使用_VueJs里利用CryptoJs实现加密及解密

第一步 安装安装crypto-js第二步 创建在js文件目录下创建一个js文件secret/*** 对页面上输入的密码进行加密传输给后台进行验证,对返回的数据进行解密,在页面展示*/let CryptoJS require(crypto-js); // 引入AES源码jsexport default {/** 对密码进行加…

html5 窗口变形,HTML5画布(变形)

坐标变换案例1&#xff1a;function draw(){var cdocument.getElementById("myCanvas");var cxt c.getContext("2d");cxt.translate(200,50);cxt.fillStylergba(255,0,0,0.25);for(var i0;i<40;i){cxt.translate(25,25);cxt.scale(0.9,0.9);cxt.rotate(…

appium GUI介绍

Appium作为APP端的自动化测试工具&#xff0c;具有很多的有点&#xff0c;今天主要介绍一下它的UI界面&#xff0c;包含其中的一些参数等。主要说的是windows下的APPIUM GUI。 先看一眼它的界面(版本为1.4.16.1) 注: 1.android Settings - Android设置按钮&#xff0c;所有和安…

迭代器模式和Java

大家好&#xff0c;在本文中&#xff0c;我们将检查Iterator Pattern 。 我知道你们中许多人已经使用过一种设计模式&#xff0c;但是也许您没有意识到它是模式&#xff0c;或者不知道它的巨大价值。 根据《 Head First Design 》一书&#xff1a; 迭代器模式提供了一种在不暴…

不使用JavaScript实现菜单的打开和关闭

我在写有菜单栏的网页时&#xff0c;基本都会用响应式设计来适配移动端&#xff0c;例如把不重要的菜单选项隐藏&#xff0c;或者创建一个菜单按钮来控制的菜单的打开和关闭之类的。而我之前一直是使用JavaScript来实现菜单的打开和关闭的&#xff0c;但最近在网上看到有人使用…

负载均衡的几种方式

&#xff08;1&#xff09;HTTP重定向负载均衡。 这种负载均衡方案的优点是比较简单&#xff0c;缺点是浏览器需要每次请求两次服务器才能拿完成一次访问&#xff0c;性能较差。&#xff08;2&#xff09;DNS域名解析负载均衡。 DNS域名解析负载均衡的优点是将负载均衡工作交给…

芝枝.计算机与人文科学,计算机与人文科学

计算机与人文科学(2013-03-13 13:24:17)标签&#xff1a;文化战争名著《静静的顿河》可以说从它诞生起便没有平静过&#xff0c;围绕它的作者所引起的争议&#xff0c;就像它获得诺贝尔文学奖一样&#xff0c;撼动文坛&#xff0c;有人指控肖洛霍夫是个骗子&#xff0c;《静静的…

rto初始化和计算_TCP系列13—重传—3、协议中RTO计算和RTO定时器维护

从上一篇示例中我们可以看到在TCP中有一个重要的过程就是决定何时进行超时重传&#xff0c;也就是RTO的计算更新。由于网络状况可能会受到路由变化、网络负载等因素的影响&#xff0c;因此RTO也必须跟随网络状况动态更新。如果TCP过早重传&#xff0c;则可能会向网络中注入很多…

在Java 8 Lambda上使用Apache Commons Functor功能接口

Apache Commons Functor &#xff08;以下称为[functor]&#xff09;是一个Apache Commons组件&#xff0c;它提供功能性的编程API和已实现的几种模式&#xff08;访问者&#xff0c;生成器&#xff0c;聚合器等&#xff09;。 Java 8具有几个不错的新功能&#xff0c;包括lamb…

HTML5 Canvas游戏开发实战 PDF扫描版

HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧&#xff0c;在介绍HTML5 Canvas相关特性的同时&#xff0c;还通过游戏开发实例深入剖析了其内在原理&#xff0c;让读者不仅知其然&#xff0c;而且知其所以然。在本书中&#xff0c;除…

多线程之创建线程

在Java中&#xff0c;线程能区分两种不同类型的线程&#xff1a;前台线程和后台线程。这两者的区别就是&#xff1a;应用程序必须运行完所有的前台线程才可以退出&#xff1b;而对于后台线程&#xff0c;应用程序则可以不考虑其是否已经运行完毕而直接退出&#xff0c;所有的后…

阿 Q 的停车场

问题描述 刚拿到驾照的 KJ 总喜欢开着车到处兜风&#xff0c;玩完了再把车停到阿 Q 的停车场里&#xff0c;虽然 她对自己停车的水平很有信心&#xff0c;但她还是不放心其他人的停车水平&#xff0c;尤其是 Kelukin。于是&#xff0c; 她每次都把自己的爱车停在距离其它车最远…