Webflow border transition disappearing after animating on

I have a border on my navbar button “current” state that I want to animate in when it is clicked. So only the current page the user is on will have a border around it and it will animate in. Currently I can get one or the other to work but not both. Either it doesn’t animate and the current page link has a border, or it animates in then immediately disappears.

I’ve tried using both transitions and interactions and neither had the outcome I expected. They would animate the border on but then disappear.

Perhaps I have my inheritance wrong, or I don’t understand the difference between interactions vs transitions, but I would love advice on how to get a border to animate on and then stay on after the animation.

By the way, this forum is a lifesaver. I’ve been able to answer a ton of my questions by reading past topics.


Here is my public share link: https://preview.webflow.com/preview/cloud-thirds?utm_source=cloud-thirds&preview=952763beb8d2c9566198e768eb090dfd
(how to access public share link)