css3动画整理

css3动画主要经常使用的属性有 变形（transform），转换（transition），动画（animation）三种。

变形（transform）主要有如下几种方式：

旋转rotate：rotate((<number>)   transform:rotate(20deg);

扭曲skew：skew(x,y)  transform:skew(30deg,10deg):

缩放scale:scale(x,y)  transform:scale(30deg,10deg):

移动translate :translate(x,y)  transform:translate(100px,0)

矩阵变形matrix:matrix(<number>, <number>, <number>, <number>, <number>, <number>) 

 

改变元素的基点位置transform-origin:transform-origin(X,Y)  用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值能够是百分值,em,px，其中X也能够是字符参数值 left,center,right；Y和X同样除了百分值外还能够设置字符值top,center,bottom(transform-origin并非transform中的属性值，他具备本身的语法)

transform语法：

transform: none|transform-functions;

例：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}

详细属性介绍：http://www.w3school.com.cn/cssref/pr_transform.asp

转换（transition）：css的transition容许css的属性值在必定的时间区间内平滑地过渡。这种效果能够在鼠标单击、得到焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

transition主要包含四个属性值：

执行变换的属性：transition-property,

变换延续的时间：transition-duration,

变换的速率变化transition-timing-function,

变换延迟时间transition-delay。

语法：

transition: property duration timing-function delay;

例：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

.div1{ width: 100px; -webkit-transition:-webkit-transform 1s 2s;
　　 -ms-transition:-ms-transform 1s 2s;
　　 -o-transition:-o-transform 1s 2s; transition:transform 1m 2s; -webkit-transform:translate(100px,0); -ms-transform:translate(100px,0);
　　 -o-transform:translate(100px,0); transform:translate(100px,0); }

详细属性介绍：http://www.w3school.com.cn/cssref/pr_transition.asp

 

动画（animation）：CSS3的Animation是由“keyframes”这个属性来实现效果的，"Keyframes",相似于“关键帧"，Keyframes具备其本身的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”。

keyframes 案例：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

或

@keyframes myfirst
{
0% {background: red;}
50% {background: yellow;}
100% {background: green;}
}

建立好动画后使用时须要绑定到选择器上，这样才会有效果，那下面就用到了animation：
例：

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

 

animation主要包含如下几个属性：

用来定义一个动画的名称：animation-name，

指定元素播放动画所持续的时间长：animation-duration，

动画的播放方式：animation-timing-function，

　　播放方式有几下几种：

　　　　一、ease：（逐渐变慢）默认值

　　　　二、linear：（匀速）

　　　　三、ease-in：(加速)

　　　　四、ease-out：（减速）

　　　　五、ease-in-out：（加速而后减速）

　　　　六、cubic-bezier：（该值容许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。全部值需在[0, 1]区域内，　　　　                不然无效。

指定元素动画开始时间：animation-delay，

指定元素播放动画的循环次数：animation-iteration-count，

指定元素动画播放的方向：animation-direction，

　　参数有如下几种：

　　　　一、normal： 默认值为normal，每次循环都是向前播放

　　　　二、alternate：动画播放在第偶数次向前播放，第奇数次向反方向播放

控制元素动画的播放状态：animation-play-state（注：这个属性目前不多内核支持）

　　参数有如下几种

　　　　一、running： 默认值   经过running将暂停的动画从新播放

　　　　二、paused：经过paused将正在播放的动画停下了　　　　

语法：

animation：name,duration,timing-function,delay,iteration-count,direction,play-state

  详细属性介绍：http://www.w3school.com.cn/css3/css3_animation.asp

 

shakeflashswingbouncetadawobblepulse

flipflipInXflipOutXflipInYflipOutY

fadeInfadeInUpfadeInDownfadeInLeftfadeInRightfadeInUpBigfadeInDownBigfadeInLeftBigfadeInRightBig

fadeOutfadeOutUpfadeOutDownfadeOutLeftfadeOutRightfadeOutUpBigfadeOutDownBigfadeOutLeftBigfadeOutRightBig

slideInDownslideInLeftslideInRightslideOutUpslideOutLeftslideOutRight

bounceInbounceInDownbounceInUpbounceInLeftbounceInRight

bounceOutbounceOutDownbounceOutUpbounceOutLeftbounceOutRight

rotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRight

rotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRight

lightSpeedInlightSpeedOuthingerollInrollOut

 

 

 

参考：http://www.cnblogs.com/2050/p/3409129.html