html基础2.1

动画：特点1.只有开始和结尾两帧     2.必须有hover这种触发条件

效果是相对于原来的位置，向x轴移动100px，向y轴移动200px

 

效果是倍数是原来的1倍；

 

效果是旋转45度；

 

 

如果想实现多个效果，只能写到一行去，而不能多行————因为transfrom是属性，而：后边是属性值，所以只能写在一行，不能多行书写

 

  另一种动画方式——————

 

通过@keyframes书写效果，这种方式可以出现多帧，from也可已书写成0%   to可写成100%，中间可以加0-100%的过程。中间可以有无数帧。

但是from状态最好与原状态一致，不然会出现卡顿.（卡顿原因：直接从原状态到from状态导致，因为是直接从from状态到to的状态）

 

 10s是动画完成时间     linear代表匀速运行    在一个秒数是延迟的时间      infinite是代表无限次