1、就两步
①定义动画
@keyframes name{
0%{background: #000000;}
100%{background: #53ED18;}
}
②引用动画
.a{
width: 100px;
height: 100px;
border: 1px solid #000000;
animation: name 10s;
}
不同的浏览器定义动画时需要加上内核
有独立内核的浏览器:火狐、谷歌、IE
HTML css js 制定标准的名字是W3c
动画默认会回到之前的状态,不会停留在最后一帧,animation-fill-mode: forwards;可以让动画停留在最后一帧
2、3D
transform-style: preserve-3d;把当前动画设为3D动画,同时设置一个镜头800-1200之间:perspective: 1000px;
注意镜头要给标签