CSS Animation Stop on last part and remain to its default style - html

Question

How to stop the animation and keep the text when it comes to the 100% in keyframes, because it disappear when it reach 100%, well I did try infinite but it seems it wasn't fit for my taste, what I want is only two or more then display remain to its default style.
p span {
width: 100%;
float: left;
color: #ec1839;
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
transform: translateY(-50px);
opacity: 0;
animation-name: titleAnimation;
animation-timing-function:ease;
animation-iteration-count: 1;
animation-duration: 3s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes titleAnimation {
0% {
transform: translateY(-50px);
opacity: 0;
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
}
20% {
transform: translateY(0);
opacity: 1;
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
}
80% {
transform: translateY(0);
opacity: 1;
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
}
90% {
transform: translateY(50px);
opacity: 0;
clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
}
}
<p><span>< Hi >, Nice to see you here</span></p>

Answer 1

The animation ends at 100%
Set 100% to desired end state for the animation
p span {
width: 100%;
float: left;
color: #ec1839;
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
transform: translateY(-50px);
opacity: 0;
animation-name: titleAnimation;
animation-timing-function:ease;
animation-iteration-count: 1;
animation-duration: 3s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes titleAnimation {
0% { // Starting condition
transform: translateY(-50px);
opacity: 0;
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
}
20% {
transform: translateY(0);
opacity: 1;
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
}
100% { // This where the animation will end and stay at
transform: translateY(0);
opacity: 1;
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
}
}
<p><span>< Hi >, Nice to see you here</span></p>