How do I make it so when I hover over my text it changes color and the color stays changed?

I'm new to web development and I just can't seem to figure out how to change the color of my text when hovered and make it stay changed. Currently I have this:

.main{
    color: white;
    font-size: 20px;
    }

.main:hover{
    animation: textchange 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes textchange{
    from{
        color: white;
    }
    to {
        color:black;
    }
}

<p class=main>
  Lorem ipsum dolor sit amet
</p>

I understand why the color doesn't stay black after unhovered but I still don't know how to approach this. I'm not even sure if this is even possible without javascript.