一、css3 Transform(某一个状态的变化)
* rotateRotate(旋转)允许你通过传递一个度数值来转动一个对象。
* scaleScale是一个缩放功能,可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
* translateTranslate就是基于X和Y 坐标重新定位元素
* skew顾名思义,skew就是要将对象倾斜,参数是度数
* matrixtransform支持矩阵变换,就是基于X和Y 坐标重新定位元素
Transform可以链起来写
-moz-transform:rotate(90) translate(30deg 20deg);
transform-origin用来设定tranaform的初始值,初始值是50% 50%,即中心。
比如rotate的初始值就是以中心来做的旋转。
二、Transition
* transition-property指定转换的CSS属性名称,比如,上面的例子中,将转换应用于background-color属性。
* transition-duration定义转换花费的时间(从旧属性换到新属性花费的时间)
* transition-timing-function可以理解为过度效果。指定转换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值:ease | linear | ease-in | ease-out | ease-in-out
* transition-delay这个比较容易理解,就是转换延迟的时间。时间可以为正整数、负整数和零,非零的时候必须设置单位是s(秒)或者ms(毫秒),为负数的时候,转换的动作会从该时间点开始显示,之前的动作被截断。
三、Animation
* animation-name动画的名称。
* animation-duration定义动画播放一次需要的时间。默认为0;
* animation-timing-function定义动画播放的方式,参数设置类似transition-timing-function
* animation-delay定义动画开始的时间
* animation-iteration-count定义循环的次数,infinite即为无限次。默认是1。
* -webkit-animation-direction动画播放的方向,两个值,默认为normal,这个时候动画的每次循环都向前播放。另一个值是alternate,则第偶数次向前播放,第奇数次向反方向播放。
#rotate{
margin:0 auto;
width:600px;
height:400px;
/* 确保我们是在一个 3-D 空间 */
-webkit-transform-style: preserve-3d;/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */
-webkit-animation-name: x-spin;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;
}
/* 定义要调用的动画 */
@-webkit-keyframes x-spin {
0%{ -webkit-transform: rotateX(0deg);}
50%{ -webkit-transform: rotateX(180deg);}
100%{ -webkit-transform: rotateX(360deg);}
}
animation定义如上。
animation可以说是transform和transition的结合
一个动画的定义包含了各个关键点状态的设定(0%,50%,100%)
Animation的调用就是在具体的选择里面加上-webkit-animation:name duration iteration-count timing
Mozilla在Gecko5才支持Animation
分享到:
相关推荐
CSS3学习必备书籍
CSS和CSS3学习笔记,知识全面,知识分类清晰,内涵学习3D的链接博客
个人学习css3例子与笔记,包含基础部分与关键布局,阴影效果,动画效果,鼠标移过内容上浮效果,纯css画三角形圆形等例子与总结
这是本人对CSS3学习的一些心得,如若有误,请批评指正,谢谢!
css3学习心得.doc
HTML5+CSS3学习总结.docx
html5教程和css3学习以及html5和css3的学习实例
CSS3学习笔记之立体盒子,供大家一起共同分享学习。
实用的HTML5+css3学习手册实用的HTML5+css3学习手册实用的HTML5+css3学习手册实用的HTML5+css3学习手册实用的HTML5+css3学习手册
CSS3学习笔记思维导图
前端学习(二)——css3学习
CSS3,这个新一代的标准应运而生。为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画、元素的变换。这些 CSS 新...
html5+css3学习模板 html5 css3 教程
css3学习手册,全面最新的css格式。当css3和html4被淘汰的时候,你就会懂得学习最新东西的好处。
自学CSS3必看的课件,看完你就明白了,HTML5+CSS3
html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习...
html5+css3 学习效果资料以及相关亮眼的css+html 代码
css3学习笔记(新增功能,粗略版本)
该文档罗列了HTML和CSS3代码和文字描述 适合参考
CSS3之学习必备书籍《CSS3 实战》.