animation transition transform

animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向

div{width:100px;height:100px;background:red;animation:move 2s;}
@keyframes move{50%{height:200px;transform:scale(1.2);background:black;}}

transition

div{width:100px;height:100px;background:red;transition:height 2s;}
div:hover{height:300px;}

transform

transform:translate(-50%,-50%); // 位移
transform:scale(1.3); // 缩放1.3倍
transform:skew(30deg,20deg); //倾斜x轴30°，y轴20°
transform:rotate(30deg); //旋转30°
transform-origin:left top; //变换中心点为左上角