CSS Animation with Transform Translate

Question

i want the bottom right animated thing to be animated like translatedX 0 to translatedX 20px then come back to -20px then to up with translateY -10px straight then come down