Alternate animation with @keyframe-CodePudding

I am having a problem with keyframes in css, here is the code I am using:

The thing is, it runs the animation correctly when I hover the item but when I remove the cursor from it, the circle returns to it original position without any animation, and i want it to run the animation backwards as well, how can I do it?

@keyframes circle-animation {
    0% {
        clip-path: circle(17%);
    }
    100% {
        clip-path: circle(250px at 80% -20%);
    }
}

body {
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
}

.grid-item {
    width: 300px;
    height: 400px;
    border-radius: 20px;
    background: red;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}


#circle {
    width: 100%;
    height: 100%;
    background: lime;
    clip-path: circle(17%);
    overflow: hidden;
}

.grid-item:hover #circle {
    animation: circle-animation 1.5s forwards;
}

<body>
<div class="grid-item">
    <div id="circle"></div>
</div>
</body>

Ignore the colors and excuse me if there's any gramaticall mistake, english is not my native language.

CodePudding user response：

you can use simple transition instead of animation: add this line to #circle

transition: clip-path 1.5s ease-in-out;

when hovering cirle:

.grid-item:hover #circle {
    clip-path: circle(250px at 80% -20%);
}

example

body {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.grid-item {
  width: 300px;
  height: 400px;
  border-radius: 20px;
  background: red;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#circle {
  width: 100%;
  height: 100%;
  background: lime;
  clip-path: circle(17%);
  overflow: hidden;
  transition: clip-path 1.5s ease-in-out;
}

.grid-item:hover #circle {
    clip-path: circle(250px at 80% -20%);
}

<body>
  <div class="grid-item">
    <div id="circle"></div>
  </div>
</body>

CodePudding user response：

For this you can dispense with a keyframes animation and instead transform the circle on hover and set the circle to have a transition of 1.5seconds on the clip-path. This will then work 'both ways'.

body {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.grid-item {
  width: 300px;
  height: 400px;
  border-radius: 20px;
  background: red;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#circle {
  width: 100%;
  height: 100%;
  background: lime;
  clip-path: circle(17%);
  overflow: hidden;
  transition: clip-path 1.5s;
}

.grid-item:hover #circle {
  clip-path: circle(250px at 80% -20%);
}

<body>
  <div class="grid-item">
    <div id="circle"></div>
  </div>
</body>