So I have a simple animation that makes my html icon to move from left to right on hover in my navbar

Animation and hover does work, but the problem is, when the cursor is hovering over the icon or , the hover effect keeps kicking in without fully play out the animation from left:0px to left:200px.

The most it will go is 50px, and then the animation starts over again from 0 like explained.

How can I hover ONCE and have the icon do one full cycle of animation?

.fire:hover {
  position: relative;
  animation-name: example;
  animation-duration: 0.5s;
}

@keyframes example {
  0% {
    left: 0px;
    top: 0px;
  }
  100% {
    left: 200px;
    top: 0px;
  }
}

<nav >
  <div >