css3动画参数解释
@keyframes
规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
------------------------------------------------------------------------------------
animation-name 规定 @keyframes 动画的名称。
--
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
--
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
cubic-bezier贝塞尔曲线(动画播放速度曲线)可参考贝塞尔曲线
--
animation-delay 规定动画何时开始。默认是 0。
--
animation-iteration-count 规定动画被播放的次数。默认是 1。
infinite无限次播放
--
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
normal
alternate动画轮流反向播放
--
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
paused暂停
running正在播放
--
animation-fill-mode 规定对象动画时间之外的状态。
none 不改变默认行为。
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both 向前和向后填充模式都被应用。
css3动画参数解释的更多相关文章
- jQuery插件css3动画模拟confirm弹窗
相比浏览器自带的alert.confirm,能力所及,我更喜欢所有的东西都是自定义:首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js.<link rel="sty ...
- CSS3动画详解(超详细)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...
- CSS3动画详解(图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...
- 使用jquery封装的动画脚本(无动画、css3动画、js动画)
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- jquery实现css3动画
jquery animate改变元素样式时,只支持数字值的变化,比如width,height等,但是css3属性状态值很多都不是数字值,而是字符串和数字混合在一起,比如translate(), rot ...
随机推荐
- IOS随机随学
1.Objective-C是一种面向对象的语言. 2.Objective-C类声明和实现包括两个部分:接口部分和实现部分. 3.Objective-C中方法不是在“.”运算符,而是采用“[]”运算符. ...
- webstorm--破解
2016.2.2 版本的破解方式: 安装以后,打开软件会弹出一个对话框:选择"license server" 输入:http://114.215.133.70:41017 2016 ...
- LeetCode:461. Hamming Distance
package BitManipulation; //Question 461. Hamming Distance /* The Hamming distance between two intege ...
- 笔记汇总.md
```javascript 1.js对象,value的值取不到,试着将引入的js文件放到body的后面 $("input[type='time']").change( functi ...
- 常用正则表达式大全,手机、电话、邮箱、身份证(最严格的验证)、IP地址、网址、日期等
<script type="text/javascript">/* * 手机号码格式 * 只允许以13.15.18开头的号码 * 如:13012345678.15929 ...
- 2016年12月29日 星期四 --出埃及记 Exodus 21:24
2016年12月29日 星期四 --出埃及记 Exodus 21:24 eye for eye, tooth for tooth, hand for hand, foot for foot,以眼还眼, ...
- java使用sax解析xml
目的:解析xml文件,并存入mysql,并且要解析的字段能一一对应.这里解析的是微博的文件,想要利用里面的article和person_id字段. 思路: 为了能得到person_id和article ...
- LINUX下查看日志
LINUX的日志都在 /var/log 目录下: 进入此文件查看目录详情: 查看某个日志的命令: 1.cat messages可以查看某个日志文件. 2.要达到实时更新,可以通过tail命令查看 ...
- python学习之深入
一.迭代器和生成器 1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退. ...
- 【iOS实现一个颜色渐变的弧形进度条】
在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...