JS+CSS 实现图片中心缩放并改变

CSS部分

@keyframes PictureChange{
	form{transform:scale(1);}
	to{transform:scale(0);}
}
/*缩小*/
@keyframes PictureChange2{
	to{transform:scale(0);}
	to{transform:scale(1.01);}
}
/*放大*/

说明：

1、scaleX(x)

语法：
transform:scaleX(x)
说明：
x表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

2、scaleY(y)

语法：
transform:scaleY(y)
说明：
y表示元素沿着垂直方向（Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

3、scale(x,y)

语法：
transform:scale(x,y)
说明：
x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。
注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。

JS部分

p.style.animation = "PictureChange 0.2s linear 0s 1";
p.addEventListener("animationend", i1);
function i1() {
p.src = "./img/google.png";
p.style.animation = "PictureChange2 0.2s linear 0s 1";

重点要明白animation中各个属性代表什么，明白addEventListener、animationend

效果