标签：
transitions(过渡)
被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终想要的值。
主要包括四个属性：
执行变换的属性：transition-property
变换延续的时间：transition-duration
变换的速率变化：transition-timing-function
变换延迟时间:transition-delay。
1.transition-propery
语法：transition-property:none| all |[<IDENT>] [‘,‘<IDEBT>]*
transition-property 是用来指定当前元素中一个属性改变时执行transition
效果，其主要有以下几个值：none(没有属性改变)； all(所有属性改变)这个也是其默认值；indent(元素属性名)
当其值为none时，transiton马上停止执行，当指定为all时，则元素产生任何属性变化时都将执行transition效果
ident是可以指定元素的某个属性值，
1.color:通过红，黄，蓝 和透明度组件变化 如：background-color,border-color,color,outline-color等css属性；
2.length 真实的数字。如：word-spacing,width,vertical-align,top,right,bottom,left,padding,
3.percentage:真实的数字，如：如：word-spacing,width,vertical-align,top,right,bottom,left,padding,
4.integer 离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性
5.number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性。
6.transform list
7.rectangle:通过x,y,width 和height(转为数值) 变换，如crop
8.visibility:离散步骤，在0 到1 数字范围之内，0 表示隐藏，1表示完全"显示"，如visibility
9.shadow:作用于color,x,y,和blur(模糊)，如text-shadow
10.gradient；通过每次停止时的位置和颜色进行变化。
11.paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似
12.space-separated list of above:如果列表有相同的项目数值，
13.a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化
2.transition-duration:
transition-duration ： <time> [, <time>]*
transition-duration 是用来指定元素，转换过程的持续时间 取值：<time>为数值，单位为s（秒）或者ms(毫秒),可以作用于所有元素，
包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。
3.transition-timing-function: 的值允许你根据时间的推进去属性值的变换率有6个可能值。
1.ease:（逐渐变慢）默认值，ease函数等同于贝塞尔曲线 (0.25, 0.1, 0.25, 1.0)
2.linear(均速)linear 函数等同于贝塞尔曲线(0.0,0.0,1.0,1.0)
3.ease-in(加速)，ease-in函数等同月贝塞尔曲线（0.42,0,1.0,1.0）
4.ease-out(减速)，ease-out函数等同于贝塞尔曲线（0,0,0.58.1,0）
5.ease-in-out(加速然后减速)，ease-in-out函数等同于贝塞尔曲线（0.42，-，0.58,1.0）
6.cubic-bezier:（该值允许你去定义一个时间曲线），特定的cubic-bezier曲线
4.transition-delay
transition-delay ： <time> [, <time>]*
transition-delay是用来指定一个动画执行开始执行的时间，也就是说当改变元素属性值后多长时间执行transtion
其取值：<time>为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所
有元素，包括:before和:after伪元素。 默认大小是"0"，也就是变换立即执行，没有延迟。
把几个transition 的声明串在一起，用逗号（”，“）隔开。
如：
a {
-moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out;
}
transition一个速记法：transition: <property> <duration> <animation type> <delay>
如：
p {
-webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;
}
由于transition 最早是由webkit内核浏览器提出的， 为了支持大众类型的浏览器需要加前缀
//Mozilla内核 -moz-transition ：
//Webkit内核 -webkit-transition ：
//Opera -o-transition ：
Animation
Keyframes 具有其自己的语法规则 ，他的命名是由”@keyframes“ 开头，后面紧接着这个动画的名称 加上一堆花括号。
对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间
语法：
@keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部写成百分比的形式：
@keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
其中IDENT是一个动画名称，你可以随便取，当然语义化一点更好，
@-webkit-keyframes ‘wobble‘ {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
元素调用animation属性
如：
.demo1 {
width: 50px;
height: 50px;
margin-left: 100px;
background: blue;
-webkit-animation-name:‘wobble‘;/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
属性
1.animation-name:
语法：animation-name: none | IDENT[,none | IDENT]*;
animation-name:是用来定义一个动画的名称，其主要有两个值：IDENT是由Keyframes创建的动画名，
换句话说此处的IDENT要和Keyframes中的IDENT一致，
如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外我们这
个属性跟前面所讲的transition一样，我们可以同时附
几个animation给一个元素，我们只需要用逗号“，”隔开。
2.animation-duratiuon
语法：animation-duration: <time>[,<time>]*
animation-duration是用来指定元素播放动画所持续的时间长，取值:<time>为数值，单位为s （秒.）其默认值为“0”。
这个属性跟transition中的transition-duration使用方法是一样的。
3.animation-timing-function:
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。
他和transition中的transition-timing-function一样，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。
具体的使用方法大家可以点这里，查看其中transition-timing-function的使用方法。
4.animation-delay
语法：animation-delay: <time>[,<time>]*
animation-delay:是用来指定元素动画开始时间。取值为<time>为数值，单位为s(秒)，其默认值也是0。
这个属性和transition-delayy使用方法是一样的。
5.animation-iteration-count
animation-iteration-count:infinite | <number> [, infinite | <number>]*
animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。
6.animation-direction
语法： animation-direction: normal | alternate [, normal | alternate]*
animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，
动画的每次循环都是向前播放；
另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
7.animation-play-state
语法：animation-play-state:running | paused [, running | paused]*
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。
他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，
我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。
Transform
字母上就是变形，改变的意思，在css3中transform主要包括一下几种，旋转rotate,扭曲skew,缩放scale和移动translate
以及矩阵变形matrix
语法:transform ： none | <transform-function> [ <transform-function> ]*
也就是：
transform: rotate | scale | skew | translate |matrix;
none表示不进怎么变换；<transform=function>表示一个或者多个变换函数，以空格分开；
换句话说就是我们同时对一个元素进行transform的多种操作，例如
rotate,scale,translate 三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，
但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
1.旋转rotate
通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。
transform-origin定义的是旋转的基点，其中angle是指旋转角度，
如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):
2.移动translate
移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）
3.缩放scale
缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放
（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；
scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，
缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
4.扭曲skew
扭曲skew和translate,secale skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
5.矩阵matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>) 以一个含六值的(a,b,c,d,e,f)
变换矩阵的形式指定一个2D变换，
相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,
6.改变元素的基点 transform-origin
他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，
换句话说我们没有使用transform-origin改变元素基点位置的情况下，
transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
面对不同浏览器的内核
//Mozilla内核浏览器：firefox3.5+
-moz-transform-origin: x y;
//Webkit内核浏览器：Safari and Chrome
-webkit-transform-origin: x y;
//Opera
-o-transform-origin: x y ;
//IE9
-ms-transform-origin: x y;
//W3C标准
如坐标位置发生变化：
1.transform:translate(x,y):
.menu ul li.translate a:hover {
-moz-transform: translate(-10px,-10px);
-webkit-transform: translate(-10px,-10px);
-o-transform: translate(-10px,-10px);
-ms-transform: translate(-10px, -10px);
transform: translate(-10px,-10px);
}
2.transform:translateX(x)
.menu ul li.translate-x a:hover {
-moz-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
-o-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
3.transform:translateY(y)
.menu ul li.translate-y a:hover {
-moz-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
4.transform:rotate(角度值)
.menu ul li.rotate a:hover {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
5.transform:scale(x,y)
.menu ul li.scale a:hover {
-moz-transform: scale(0.8,0.8);
-webkit-transform: scale(0.8,0.8);
-o-transform: scale(0.8,0.8);
-ms-transform: scale(0.8,0.8);
transform: scale(0.8,0.8);
}
6.transform:scaleX(x)
.menu ul li.scale-x a:hover {
-moz-transform: scaleX(0.8);
-webkit-transform: scaleX(0.8);
-o-transform: scaleX(0.8);
-ms-transform: scaleX(0.8);
transform: scaleX(0.8);
}
7.transform:scaleY(y)
.menu ul li.scale-y a:hover {
-moz-transform: scaleY(1.2);
-webkit-transform: scaleY(1.2);
-o-transform: scaleY(1.2);
-ms-transform: scaleY(1.2);
transform: scaleY(1.2);
}
8.transform:skew(x,y)
.menu ul li.skew a:hover {
-moz-transform: skew(45deg,15deg);
-webkit-transform: skew(45deg,15deg);
-o-transform: skew(45deg,15deg);
-ms-transform: skew(45deg,15deg);
transform: skew(45deg,15deg);
}
9.transform:skewX(x)
.menu ul li.skew-x a:hover {
-moz-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);
-o-transform: skewX(-30deg);
-ms-transform: skewX(-30deg);
transform: skewX(-30deg);
}
10.transform:skewY(y)
.menu ul li.skew-y a:hover {
-moz-transform: skewY(30deg);
-webkit-transform: skewY(30deg);
-o-transform: skewY(30deg);
-ms-transform: skewY(30deg);
transform: skewY(30deg);
}
11.transform:matrix(a,b,c,d,e,f)
.menu ul li.matrix a:hover {
-moz-transform: matrix(1,1,-1,0,0,0);
-webkit-transform: matrix(1,1,-1,0,0,0);
-o-transform: matrix(1,1,-1,0,0,0);
-ms-transform: matrix(1,1,-1,0,0,0);
transform: matrix(1,1,-1,0,0,0);
}
css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
标签：
原文地址：http://www.cnblogs.com/nmxs/p/5177997.html
