使用@keyframe 的交替动画答案

【问题标题】：Alternate animation with @keyframe使用@keyframe 的交替动画
【发布时间】：2021-11-23 07:54:32
【问题描述】：

我在 css 中遇到关键帧问题，这是我正在使用的代码：

问题是，当我将鼠标悬停在项目上时，它会正确运行动画，但是当我从中移除光标时，圆圈会返回到原始位置而没有任何动画，我希望它也能向后运行动画，如何我可以吗？

@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>

如果有任何语法错误，请忽略颜色，请原谅，英语不是我的母语。

【问题讨论】：

这能回答你的问题吗？ What is the opposite of :hover (on mouse leave)?

标签： html css css-animations css-transitions

【解决方案1】：

为此，您可以省去关键帧动画，而是在悬停时变换圆圈并将圆圈设置为在剪辑路径上具有 1.5 秒的过渡。然后这将“双向”工作。

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>

【讨论】：

【解决方案2】：

您可以使用简单的过渡而不是动画：将此行添加到#circle

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

悬停时：

.grid-item:hover #circle {
    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;
  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>

【讨论】：