Animation clash - html

Question

I've worked out to attach two different animations to the same element, by using a comma, but the animation is finding compromise instead of executing each in successive order. How do I get one to execute and then the next when it's finished? What I want is right to left and, when finished, top to bottom. what I have is diagonal. Why?
.contact{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
.contact:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid
transparent;
border-top: 70px solid
red;
}
.contact{
margin-left: 200px;
top: 20px; transform:
rotate(90deg);
}
.contact {
animation: fish 4s linear
infinite, fish1 4s linear
infinite; animation-
duration: 4s; animation-iteration-
count: infinite; animation.
direction: alternate;
animation-timing-function: linear;
}
#keyframes fish {
from {right: 100px;} to {right: 1px; position: relative;}
}
#keyframes fish1 {
from {top: 2px;} to {top: 200px;}
}
<div class="contact"></div>

Answer 1

You can try this code
.contact{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: 0;
margin-left: 0;
transform: rotate(90deg);
float:right;
}
.contact:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
.contact {
animation: fish 4s linear infinite;
}
#keyframes fish {
0% {right: 0px; top: 0px;}
25% {right: 200px; top: 0px;}
50% {right: 200px; top: 200px;}
75% {right: 0px; top: 200px;}
100% {right: 0px; top: 0px;}
}
<div class="contact"></div>

Answer 2

Use Animation Keyframes, simply add a percentage for each keyframe. Also there is no need to declare multiple classes .contact, I've merged them into one
.contact{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
margin-left: 200px;
top: 20px;
transform: rotate(90deg);
animation: fish 4s linear infinite;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.contact:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid
red;
}
#keyframes fish {
0% { right: 100px; }
50% { right: 1px; top: 2px; }
100% { top: 200px; }
}
<div class="contact"></div>