css animate

可以使用transtion和 animation 定义一段时间的css 变化

transition 通常是一些转换和过渡的效果

animation 通常是一些 @keyframe 定义的动画

animationiteration事件会在当前的动画元素完成一个动画迭代的时候被触发。
这个事件非常有用，特别是当我们想在某个迭代完成后停止一个动画，但又不是在动画过程中打断它

transform(2d,3d转换)  transform有四个常用方法：旋转rotate()、缩放scale()、移动translate()、 倾斜skew()

@keyframe name1{from{transform:rotate(0deg)}to{transform:rotate(360deg)}

    类样式.animation{animation:name1 1s infinite;}

// 动画只触发一次 window.setTimeout 移除动画类

function act(selector,animation,remove_time){
    $(selector).addClass(animation);
    var delay=window.setTimeout(function(){
              $(selector).removeClass(animation)
          },remove_time);
}

css3:

transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */

旋转元素的基点
transform-origin:20% 40%;
-ms-transform-origin:20% 40%;         /* IE 9 */
-webkit-transform-origin:20% 40%;    /* Safari 和 Chrome */
-moz-transform-origin:20% 40%;        /* Firefox */
-o-transform-origin:20% 40%;        /* Opera */


-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;


-moz-border-image:url(/i/border.png) 30 30 round;    /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;        /* Opera */
border-image:url(/i/border.png) 30 30 round;


-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;

-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;

文本换行
word-break
word-wrap

@font-face:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}


2D转换(transform):

旋转: rotate(30deg);
移动: translate(50px,100px);
尺寸: scale(1,0.5);
翻转: skew(0deg,10deg);  前倾,侧翻(斜拉)
混合以上: matrix();    (2D矩阵)


3D转换:

混合: matrix3d();     (3D矩阵)


理解css3 matrix(); http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/comment-page-2/

2d:  matrix(a,b,c,d,e,f);
[a,c,e]  [x]  [ax+cy+e](变换后的x位置)
[b,d,f]  [y]  [bx+dy+f](变换后的y位置)
[0,0,1]  [1]  [0 +0 +1]

x,y为 transform-origin的 变换基点坐标(0,0)
/* a=1, b=0, c=0, d=1, e=30, f=30 */ 下移30,30

旋转元素的背面是否可见:
backface-visibility:hidden;
-webkit-backface-visibility:hidden;    /* Chrome 和 Safari */
-moz-backface-visibility:hidden;     /* Firefox */
-ms-backface-visibility:hidden;     /* Internet Explorer */

transition:(多个属性的过渡上用 , )

transition: width 2s;
-moz-transition: width 2s;    /* Firefox 4 */
-webkit-transition: width 2s;    /* Safari 和 Chrome */
-o-transition: width 2s;    /* Opera */

transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width; /* Opera */

transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */

transition-timing-function: linear;
-moz-transition-timing-function: linear; /* Firefox 4 */
-webkit-transition-timing-function: linear; /* Safari 和 Chrome */
-o-transition-timing-function: linear; /* Opera */

transition-delay: 2s;
-moz-transition-delay: 2s; /* Firefox 4 */
-webkit-transition-delay: 2s; /* Safari 和 Chrome */
-o-transition-delay: 2s; /* Opera */

css3:animation

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

@keyframes

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

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

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


animation-name: myfirst;
-moz-animation-name: myfirst; // Firefox
-webkit-animation-name: myfirst; // Safari 和 Chrome
-o-animation-name: myfirst;  //  Opera


animation-duration: 5s;
-moz-animation-duration: 5s;
-webkit-animation-duration: 5s;
-o-animation-duration: 5s;


animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;

animation-delay: 2s;
-moz-animation-delay: 2s;
-webkit-animation-delay: 2s;
-o-animation-delay: 2s;


animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;


animation-direction: alternate;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;


animation-play-state: running;
-moz-animation-play-state: running;
-webkit-animation-play-state: running;
-o-animation-play-state: running;

 

easy-animation | Animation for Sass
http://www.cnblogs.com/maplejan/p/3659830.html

更好的方式 Autoprefixer ?

cSS3 的 transition 和 animation 属性来完成一些特效,在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。