day02
空间转换:
视距 取值400px~1200px perspective: 800px;
perspective只是增加了近大远小的效果,并不是真正开启3d
开启3D效果 transform-style: preserve-3d;
动画:
调用动画
animation: bigger 2s;
@keyframes bigger {
from
/* 规定的刚开始的状态,正常书写css样式
width: 200px;*/
}
to {
/* 规定最终的状态 */
width: 600px;
}
}
百分比可以实现阶段性的动画
@keyframes bigger {
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
animation复合属性(谁在调用动画就给谁设置):
animation: change 2s steps(4) alternate infinite;
暂停动画
animation-play-state: paused;