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);