animation
http://blog.csdn.net/zj831007/article/details/7427752
.box{width:100px;height:100px;background-color:red;animation: move 2s infinite alternate;}
/*infinite:show animation infinite
linear:
alternate:原路返回,grew then shrink to normal
it' can make as a progres bar.
*/
.box{animation: move 2s infinite alternate;}
代表这个动作叫作”move”是 历时两秒(2s),
次数(infinite)
alternate(原路返回)
keyframes关键针
@keyframes move{
from{width:100px;}
/* "grow"is a name,used for keyframes match to ther right animation property*/
to{width:300px;height:100px;}
/* "from" and "to" stand for the anmatiom's 阶段section */
}
/* "grow"is a name,used for keyframes match to ther right animation property*/
move是animation的命名名称
@keyframes grow{
/*from{width: 0%;}
to{width: 100%;}*/
0%{
width: 0%;
}
50%{
width: 99%;
}
80%{
width: 99%;
}
100%{
width: 100%;
}
}
这个表示了keyframes(关键针) 的变化的阶阶段(seciton)应该呈现什么样的状态.
从小到大,从无到有
@keyframes load{
from{opacity: 1;transform: scale(0.3);}
to{opacity: 0;transform: scale(1.2);}
}
/*从透明变消失,从0.3倍大小,变为1.2倍大小*/
每个小孩挨个出来
<style>
.loading span:nth-child(1){
animation-delay: 0.13s;
}
.loading span:nth-child(2){
animation-delay: 0.26s;
}
.loading span:nth-child(3){
animation-delay: 0.39s;
}
.loading span:nth-child(4){
animation-delay: 0.52s;
}
.loading span:nth-child(5){
animation-delay: 0.78s;
}
</style>
第一个小孩等0.13s出来
第二个…
…
.box{width: 100px;height: 100px;background: pink;margin: 0 auto;animation: move 2s 3}
/*变化2s每次,总计3次(times)*/
/* 写的时候变化的属性要一一对应 */
@keyframes move{
0%{
transform: scale(1) translateY(0px) rotate(0deg);
/*变化属性原大小,*/
}
50%{
transform: scale(1.5) translateY(200px) rotate(360deg);
/*变为1.5倍大小,轴移动200px,旋转360度*/
}
100%{
transform: scale(1) translateY(0) rotate(0deg);
/*这个阶段,恢复正常状态*/
}
}
景深 Depth of Field
http://www.webhek.com/post/css-3d-rotate-cube.html
立体感中的远近感就叫作景深.
目的就是为了产生立体感.
transform: rotateX(45deg);
rotateX
ratateY
rotateZ
加入了景深这后具有了立体感
.stage {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
perspective: 500px; /*增*/
}
.stage .demo {
width: 200px;
height: 200px;
background-color: orangered;
transform: rotateX(45deg);
}
在stage里定义了这个stage离我有500px,所以基于这个3d模板,其子元素demo旋转,就产生了3d的效果,也就是先有景深,再旋,就是3d旋转.
perspective-origin
刚才我说道我们的肉眼相当于在舞台元素中心的位置,其实这个“眼睛”的位置是可以调整的,这用到了perspective-origin属性,默认的属性值就是 50% 50%,也就是舞台元素的中心位置,我们可以尝试调整视角。
.stage {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
perspective: 500px;
perspective-origin: 10px 10px; /*增*/
}
.stage .demo {
width: 200px;
height: 200px;
background-color: orangered;
transform: rotateX(45deg);
}
这就相当于在舞台元素的距离原点(左上)10px,10px的位置往里看,理解这个需要我们一定的空间立体感