Could you tell me how to make 2 animation. for one picture?

I"m going to make the picture suddenly enlarge, and then delay3 seconds to move around.

-sharpm2{
     position: absolute;
     width: 100%;
     height: 44%;
     margin-top: 30%;
     margin-left: 4%;
     background-image: url(monster.png);
     background-Size: 100% 100%;
     background-Repeat: no-repeat;
     z-index: 90;     
     -webkit-animation-name: scaleDraw;/**/
     -webkit-animation-timing-function: linear; /**/
     -webkit-animation-iteration-count: 1;  /**/
     -webkit-animation-duration: 0.7s; /**/
     -webkit-animation-delay:0;
     animation-name: scaleDraw; 
     animation-timing-function: linear; 
     animation-iteration-count: 1;
     animation-duration: 0.7s;  
     animation-delay:0;
}
@keyframes scaleDraw {  /*scaleDraw*/
     0%  {transform: scale(1.0); }
     5%  {transform: scale(0.95);}
     10% {transform: scale(0.90);}
     15% {transform: scale(1.0); }
     20% {transform: scale(1.2); }
     25% {transform: scale(1.4); }
     30% {transform: scale(1.6); }
     35% {transform: scale(1.8); }
     40% {transform: scale(2.0); }
     45% {transform: scale(2.2); }
     50% {transform: scale(2.4); }
     55% {transform: scale(2.0); }
     60% {transform: scale(1.8); }
     65% {transform: scale(1.6); }
     70% {transform: scale(1.4); }
     75% {transform: scale(1.2); }
     80% {transform: scale(1.0); }
     85% {transform: scale(0.95);}
     90% {transform: scale(0.90);}
     95% {transform: scale(0.95);}
     100%{transform: scale(1.0); } 
}
@-webkit-keyframes-scaleDraw{
     0%  {transform: scale(1.0); }
     5%  {transform: scale(0.95);}
     10% {transform: scale(0.90);}
     15% {transform: scale(1.0); }
     20% {transform: scale(1.2); }
     25% {transform: scale(1.4); }
     30% {transform: scale(1.6); }
     35% {transform: scale(1.8); }
     40% {transform: scale(2.0); }
     45% {transform: scale(2.2); }
     50% {transform: scale(2.4); }
     55% {transform: scale(2.0); }
     60% {transform: scale(1.8); }
     65% {transform: scale(1.6); }
     70% {transform: scale(1.4); }
     75% {transform: scale(1.2); }
     80% {transform: scale(1.0); }
     85% {transform: scale(0.95);}
     90% {transform: scale(0.90);}
     95% {transform: scale(0.95);}
     100%{transform: scale(1.0); }
}
-sharp-sharp-sharp

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

.box { display: inline-block; width: 150px; height: 150px; background: tomato; color: white; border: 10px solid red; animation: scale 1s, translateX 1s 2s; } @keyframes scale { to { transform: scale(2.0) } } @keyframes translateX { to { transform: translateX(100px); } }