transform效果

Question

          div{ animation: play 3s linear 0.3s infinite;
	   -webkit-animation:play 3s linear 0.3s infinite;
		width:100px;height:100px}
		@keyframes play{
			0%{transform:scale(1);
			-webkit-transform: scale(1);
			transform:translate(0,0);
			-webkit-transform:translate(0,0);
			}
			50%{transform:scale(1.1);
			-webkit-transform: scale(1.1);
			transform:translate(10px,10px);
			-webkit-transform:translate(10px,10px);}
	   	100%{
	   		transform:scale(1.2);
	   		-webkit-transform: scale(1.2);
	   		transform:translate(20px,20px);
			-webkit-transform:translate(20px,20px);}
		}
		
		@-webkit-keyframes play{
			0%{transform:scale(1);
			-webkit-transform: scale(1);
			transform:translate(0px,0px);
			-webkit-transform:translate(0px,0px);}
			50%{transform:scale(1.1);
			-webkit-transform: scale(1.1);
			transform:translate(10px,10px);
			-webkit-transform:translate(10px,10px);}
	   	100%{
	   		transform:scale(1.2);
	   		-webkit-transform: scale(1.2);
	   		transform:translate(20px,20px);
			-webkit-transform:translate(20px,20px);}
		}

单独scale或者translate都有效果，两个一起写就显示一种效果，

Answer 1

可以全并的，而且代码量也大大减少-webkit-transform: scale(1.2) translate(20px,20px);transform: scale(1.2) translate(20px,20px);

Answer 2

多个用空格隔开

Answer 3

-webkit-transform: scale(1,2) translate(200px,20px);