文章/答案/技术大牛

发布

社区首页 >问答首页 >使用@keyframe替换动画

问使用@keyframe替换动画
EN

Stack Overflow用户

提问于 2021-10-01 17:15:31

回答 2查看 35关注 0票数 0

我在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>

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

css

css-animations

css-transitions

html

回答 2

Stack Overflow用户

发布于 2021-10-01 17:38:40

您可以使用简单的过渡而不是动画:将这一行添加到#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>

票数 2

Stack Overflow用户

发布于 2021-10-01 17:35:58

为此，您可以省去关键帧动画，而是在悬停时变换圆，并将圆设置为在剪辑路径上有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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69409738

复制

相似问题

问使用@keyframe替换动画
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用@keyframe替换动画EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用@keyframe替换动画
EN