add 2 css animation to one element - html

Question

I have 2 elements one is rect and another is line. I move rect from left to right once that is done then I rotate line. Then what I want is that once the line is rotated then I want to change the background color of rect.
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
animation: move 1s;
animation-fill-mode: forwards;
}
.line {
position: absolute;
top: 200px;
left: 100px;
height: 100px;
border-right: 2px solid green;
animation: rotate 1s;
animation-fill-mode: forwards;
animation-delay: 1.3s;
}
#-webkit-keyframes move {
to {
left: 200px;
}
}
#-webkit-keyframes rotate {
to {
transform: rotate(360deg);
}
}
<div class="rect"></div>
<div class="line"></div>
JSFiddle

Answer 1

you can multiple animation separated with comma.
Just add animation delay to second animation which changes the color
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
animation: move 1s, colorChange 1s 2s;
animation-fill-mode: forwards;
}
.line {
position: absolute;
top: 200px;
left: 100px;
height: 100px;
border-right: 2px solid green;
animation: rotate 1s;
animation-fill-mode: forwards;
animation-delay: 1.3s;
}
#-webkit-keyframes move {
from {}
to {
left: 200px;
}
}
#-webkit-keyframes rotate {
from {}
to {
transform: rotate(360deg);
}
}
#keyframes colorChange {
to {
background-color: green;
}
}
<div class="rect"></div>
<div class="line"></div>

Answer 2

You don't need an additional animation, you just need to adjust the keyframe % and change the duration to 2.3s, which is 1s + 1.3s, if you want the color change to happen simultaneously at the end, if not then adjust the % accordingly:
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
animation: move 2.3s forwards;
}
.line {
position: absolute;
top: 200px;
left: 100px;
height: 100px;
border-right: 2px solid green;
animation: rotate 1s 1.3s forwards;
}
#-webkit-keyframes move {
43.48%, 100% {left: 200px} /* 100% / 2.3 = 43.48% (around), which is 1s duration (like before), then keep it there till the end (100%) */
0%, 99.99% {background: red} /* keep it red 99.99% of the time */
100% {background: blue} /* but not 100% */
}
#-webkit-keyframes rotate {
to {transform: rotate(360deg)}
}
<div class="rect"></div>
<div class="line"></div>

Answer 3

How's this?
In .rect, add a second animation:
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
animation: move 1s, turnGreen 2.3s;
animation-fill-mode: forwards;
}
Then define the new animation:
#-webkit-keyframes turnGreen{
0% {background: red;}
99% {background: red;}
100% {background: green;}
}
I tested this on your JSFiddle and it seemed to work as you described.