使用@keyframe 的交替动画
Posted
技术标签:
【中文标题】使用@keyframe 的交替动画【英文标题】：Alternate animation with @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)? 【参考方案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>【讨论】：
以上是关于使用@keyframe 的交替动画的主要内容，如果未能解决你的问题，请参考以下文章