1:@keyframes及其引用
.block{ position:absolute ; top:0; left:0; background-color: black; width: 200px; height: 200px; animation: mymove 10s linear infinite; } @keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } </style> </head> <body> <div class="block"></div>结果为每隔2.5s该动画变换一个样式，也可以不用百分比表示，用from和to表示
引用为animation其中
mymove:规定需要绑定到选择器的 keyframe 名称。也可用all指所有的属性
10s:规定完成动画所花费的时间，以秒或毫秒计。
linear:规定动画的速度曲线，linear值为中间慢两边快
infinite:循环播放
2：transform：这个属性允许你将元素旋转，缩放，移动，倾斜
from{ transform: rotatex(0deg) rotatey(0deg); } to{ transform: rotatex(360deg) rotatey(360deg); }指该动画绕x与y轴旋转360度
transform: translatez(-200px);沿着z轴平移-200像素值
还有两个属性skew与scale
3：：before与：after
<style> p:before{ content: "Hi"; } </style> </head> <body> <p>Excuse me!</p>在p元素之前插入内容
同理after
4:transform-style属性指定嵌套元素是怎样在三维空间中呈现
transform-style: preserve-3d;以3d形式显示
flat表示所有子元素在2D平面呈现。
