css3 动画的有关属性
transform
transform: none|transform-functions;
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
2D transform常用的transform-function的功能:
- translate():用来移动元素,可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数:
- translateX() 和 translateY()。
- scale():用来缩小或放大元素,可以使用元素尺寸发生变化。在此基础上有两个扩展函数:
- scaleX() 和 scaleY()。
- rotate():用来旋转元素。
- skew():用来让元素倾斜。在此基础上有两个扩展函数:skewX()和skewY()。
- matrix():定义矩阵变形,基于X轴和Y轴坐标重新定位元素位置。
3D transform常用的transform-function的功能:
- translate3d():移元素元素,用来指定一个3D变形移动位移量
- translate():指定3D位移在Z轴的位移量。
- scale3d():用来缩放一个元素。
- scaleZ():指定Z轴的缩放向量。
- rotate3d():指定元素具有一个三维旋转的角度。
- rotateX()、rotateY()和rotateZ():让元素具有一个旋转角度。
- perspective():指定一个透视投影矩阵。
- matrix3d():定义矩阵变形。
transition
transition: property duration timing-function delay;默认值(all 0 ease 0)
transition 属性是一个简写属性,用于设置四个过渡属性;
ease 可以用 cubic-bezier(1.0, 0.5, 0.8, 1.0) 替代;
具体见 http://cubic-bezier.com/#.17,.67,.83,.67
transition 属性是一个简写属性,用于设置四个过渡属性;
规定设置过渡效果的 CSS 属性的名称。 |
|
规定完成过渡效果需要多少秒或毫秒。 |
|
规定速度效果的速度曲线。 |
|
定义过渡效果何时开始。 |
animation
animation: name duration timing-function delay iteration-count direction;默认值(none 0 ease 0 1 normal)
animation 属性是一个简写属性,用于设置六个动画属性。
规定需要绑定到选择器的 keyframe 名称。。 |
|
规定完成动画所花费的时间,以秒或毫秒计。 |
|
规定动画的速度曲线。 |
|
规定在动画开始之前的延迟。 |
|
规定动画应该播放的次数。 |
|
规定是否应该轮流反向播放动画。 |
css3 动画的有关属性的更多相关文章
- CSS3 动画的一些属性
定义式 @keyframes 动画名称{ from{ } to{ } } 调用式 动画类似函数,只定义不调用是没效果的,所以要配合调用式使用. animation: 动画名称 动画时间 延时 时间曲线 ...
- css3动画(transition)属性探讨
在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...
- CSS3动画那么强,requestAnimationFrame还有毛线用?
一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...
- [转]WebKit CSS3 动画基础
前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下.首先看看效果http://www.css88.com/demo/css3_Animation/ 很悲剧的是css3动画现在只有WebK ...
- CSS3动画那么强,requestAnimationFrame还有毛线用--摘抄
CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下
问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- 解决浏览器background-image属性不支持css3动画
问题 最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题.在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上 ...
随机推荐
- Javascript模板引擎插件收集
为什么要用JS的模板引擎,打个比方,如果你要通过接口绑定数据,最终要加进去DOM中,我们普遍的做法就是不断的+,最终append进去,但是这样的做法就是后续人员压根就没法维护.所以这时模板引擎出来了. ...
- Java时间类型转换
String转Long Long long=new SimpleDateFormat("yyyyMMddHHmmss").parse(String).getTime(); Long ...
- 他(he)(钟神)
他[问题描述]一张长度为N的纸带,我们可以从左至右编号为0 −N(纸带最左端标号为0) .现在有M次操作,每次将纸带沿着某个位置进行折叠,问所有操作之后纸带的长度是多少.[输入格式]第一行两个数字N, ...
- 谈iOS抓包:Mac下好用的HTTP/HTTPS抓包工具Charles
在Mac下做开发,用Fiddler抓包由于离不开Windows比较痛苦,还好有Charles,到官网http://www.charlesproxy.com/可下载到最新版本(若不支持rMBP可拖到Re ...
- jquery理财贷款计算器
先放效果图,如下: 需要引入jquery ,bootstrap jq代码如下: function pCalculator(amount,term,rating,repayway){ var zhong ...
- android中导入低版本project可能会遇到的编译问题(转自: Victor@Beijing)
使用高版本的SDK后再导入以前用低版本的project时,会遇到一些兼容性的问题. (1)Unable to resolve target 'android-5' 因为本机中现在使用的是2.2的SDK ...
- ruby 基础知识三 读写文件
1.File 中参数的含义 r 只读模式.文件指针被放置在文件的开头.这是默认模式. r+ 读写模式.文件指针被放置在文件的开头. w 只写模式.如果文件存在,则重写文件.如果文件不存在,则创建一个新 ...
- lcok-free简易实现
lock-free是一种基于原子变量类来构建的非阻塞同步算法. 比较并交换(compare-and-swap) 我们经常会先检查某项东西,然后对其进行修改,如if(X...) {X=...}.这种行为 ...
- EST
表达序列标签(expressed sequence tags,ESTs)是指从不同组织来源的cDNA序列.这一概念首次由Adams 等于1991年提出.近年来由此形成的技术路线被广泛应用于基因识别.绘 ...
- jQuery EasyUI Combobox 无法获取属性 options 的值: 对象为 null 或未定义
错误的写法: $('#combobox1').combobox({ valueField: 'id', textField: 'text',data:[{id:1,text:'蚂蚁小羊'}]}); 正 ...