Css animation

Question

Can someone please tell me how to write this animation so that it turns just the triangle yellow and then makes it stay yellow?
https://code.sololearn.com/W3D4BSuD0TJP/?ref=app

Answer 1

Try this:

.triangle {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 70px solid green;
margin-top: 220px;
margin-left: 220px;
position: absolute;
animation: trngl 1s linear forwards;
}
@keyframes trngl {
0% {border-bottom-color: green;}
100% {border-bottom-color: yellow;}
}

EXPLANATION:
You have to animate the border-bottom-color because that's green the triangle.
To make the triangle remain yellow use the 'forward' value in the animation:
https://www.w3schools.com/css/css3_animations.asp