<style>
.abc{ width:50pxheight:50pxbackground:#000}
.abc:hover{ animation:maozi 25s ease infinite}
@keyframes maozi{
0%{ width:50pxheight:50px}
50%{ width:400pxheight:400px}
100%{ width:20pxheight:60px}
}
</style>
另外还有一种方法，就是使用js来实现添加一条class引用，效率没有伪类实现方法高。
css3 2D变形
1、位移：transform：translateX x轴位移
transform：translateY y轴位移
同时写会被覆盖，所以用复合属性写
复合属性：transform：translate（100px，100px）第一个是x轴参数 第二个是y轴参数
起始点：00点，边框的左上角的顶点
transform：translate（100px 0，） x轴距离左边100px
transform：translate（ 0，100px） y轴距离左边100px
2、缩放：transform：scale（2）里面的数字表示倍的意思
transform：scale（1）表示本身，不变
transform：scale（0.5）小于1表示缩小
transform：scale（0）表示缩小到消失
3、倾斜：transform：skew（ax，ay）表示x轴倾斜角度，y轴倾斜角度 单位是度数值deg
transform：skew（60deg，20deg）
x轴会改变宽度，y轴会改变高度
第一个表示x轴，按照逆时针方向进行旋转，宽度变化，高度不变
第二个表示y轴，按照顺时针方向进行旋转，高度变化，宽度不变
4、旋转：rotate（）单位也是deg
只设置一个值表示沿中心点旋转
rotatex 沿x轴转
rotatey沿y轴转
transition: all 2s linear .5s/加在div上
过渡属性
过渡动画函数（( transition-timing-function )
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
linear
规定以相同速度开始至结束的过渡效果
ease
规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值)
ease-in
规定以慢速开始的过渡效果
ease-out
规定以慢速结束的过渡效果
ease-in-out
规定以慢速开始和结束的过渡效果
