css动画之 transtion&animation

transition

 

1.当触发伪类（:hover,:click,:active,:focus）时，会触发动画
　　变化前样式：
　　.a{width:100px;transiton:2s;
                　　 -moz-transition:width 2s; /* Firefox 4 */
                　　 -webkit-transition:width 2s; /* Safari and Chrome */
                　　 -o-transition:width 2s; /* Opera */
　　}
　　变化后样式：
　　.a:hover{width:200px;}

2.通过动态添加class
　　//先改变宽在改变高
　　变化前：
　　.a{width:100px;height:100px;transiton:width 2s;height:2s;}
　　变化后：
　　.b{width:200px;height:200px}

　　//同时改变宽高
　　变化前　　
　　.a{width:100px;height:100px;transiton:2s;} 
　　变化后：
　　.b{width:200px;height:200px}

 
注：将b动态添加到a所在的标签；b不能提前存在

 

animation

两步：
1.定义一个@keyframes amove{1% {height:0px}; 100%{height:100px};  };
2.在class里使用动画：animation :amove 1s 1; 最后一个参数代表着写循环次数或者 infinite （无限循环）

 

 

JQ的animation APi

$('this').animation({height:100px})