如何在关键帧中实现鼠标移开的反向动画 [英] How to achieve reverse animation on mouse out in keyframes

问题描述

我正在尝试在 div 上添加放大动画.我尝试使用 transition 和 animation 属性.

在 transition 的情况下，您可以注意到当悬停时动画平滑反转.但是，使用 animation 属性时不会发生这种情况(div 立即转换回初始宽度)

谁能告诉我:

1. 为什么仅在 animation 的情况下会出现这种行为?
2. 如何使用 animation 属性实现相同的效果?

.animations {显示:弹性；填充:80px；宽度:100vw；高度:100vh；背景:线性渐变(向右，#f3d2d2，白色，#cee5f3)；}.animations >div {宽度:200px；高度:200px；边距:40px；字体系列:系统用户界面；显示:弹性；弹性方向:列；对齐项目:居中；}.animations >p{颜色:黑色;弹性:1；文本对齐:居中；}.animations .animated-box {弹性:2；宽度:100%；背景:灰色；光标:指针；边框半径:4px；显示:弹性；对齐项目:居中；对齐内容:居中；白颜色;}.animated-box.scale-up {}.animated-box.scale-up:悬停{动画:放大 0.5 秒缓动前进；变换:比例(1)；}.animated-box.scale-up-with-mouseout {过渡:转换 0.5 秒的缓入；}.animated-box.scale-up-with-mouseout:hover {变换:比例(1.2)；}@keyframes 放大{100% {transform: scale(1.2)};0%{transform: scale(1)};}

<div><div class="animated-box scale-up">悬停在我身上</div><p>放大(使用关键帧)</p>
<div><div class="animated-box scale-up-with-mouseout">悬停我</div><p>放大(带过渡)</p>

解决方案

如果要达到同样的效果，需要创建两个动画.一个用于悬停行为，第二个用于默认状态样式.但是(这不是错误)当页面第一次渲染动画开始以默认样式播放时.因为动画不需要用伪类隐式调用它.

• transition - 是简单的开始-结束-开始动画.
• 动画 - 更高级的开始-结束动画，您需要在其中管理帧.

.animations {显示:弹性；填充:80px；宽度:100vw；高度:100vh；背景:线性渐变(向右，#f3d2d2，白色，#cee5f3)；}.animations >div {宽度:200px；高度:200px；边距:40px；字体系列:系统用户界面；显示:弹性；弹性方向:列；对齐项目:居中；}.animations >p{颜色:黑色;弹性:1；文本对齐:居中；}.animations .animated-box {弹性:2；宽度:100%；背景:灰色；光标:指针；边框半径:4px；显示:弹性；对齐项目:居中；对齐内容:居中；白颜色;}.animated-box.scale-up {动画:按比例缩小 0.5 秒缓入；}.animated-box.scale-up:悬停{动画:向前放大 0.5 秒缓入；}.animated-box.scale-up-with-mouseout {过渡:转换 0.5 秒的缓入；}.animated-box.scale-up-with-mouseout:hover {变换:比例(1.2)；}@keyframes 放大{0% {变换:比例(1)；}100% {变换:比例(1.2)；}}@keyframes 缩小{0% {变换:比例(1.2)；}100% {变换:比例(1)；}}

 
<div><div class="animated-box scale-up">悬停在我身上</div><p>放大(使用关键帧)</p>
<div><div class="animated-box scale-up-with-mouseout">悬停我</div><p>放大(带过渡)</p>

I am trying to add scale up animation on a div. I tried this using both transition and animation property.

In case of transition you can notice that when hovered out the animation is smoothly reversed. However, this doesn't happen when using animation property (the div transitions back to initial width instantly)

Can someone tell me:

1. Why this behaviour in case of animation only?
2. How can I achieve the same using animation property?

.animations {
  display: flex;
  padding: 80px;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #f3d2d2, white, #cee5f3);
}
.animations > div {
  width: 200px;
  height: 200px;
  margin: 40px;
  font-family: system-ui;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.animations > p {
  color: black;
  flex: 1;
  text-align: center;
}
.animations .animated-box {
  flex: 2;
  width: 100%;
  background: grey;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.animated-box.scale-up {

}
.animated-box.scale-up:hover {
   animation: scale-up 0.5s ease forwards;
 transform: scale(1);
}
.animated-box.scale-up-with-mouseout {
  transition: transform 0.5s ease-in;
}
.animated-box.scale-up-with-mouseout:hover {
  transform: scale(1.2);
}
 
  
@keyframes scale-up {
  100% {transform: scale(1.2)};
  0%{transform: scale(1)};
}

<div class="animations">
  <div>
    <div class="animated-box scale-up">Hover me</div>
    <p>Scale up (with keyframes)</p>
  </div>
  <div>
    <div class="animated-box scale-up-with-mouseout">Hover me</div>
    <p>Scale up (with transition)</p>
  </div>
</div>

解决方案

If you want achieve the same, need create two animations. One for hover behavor, second for default state style. But (it's not bug) when page first time to render animation start to play in default style. Because animation don't require implicitly call it with pseudo classes.

• transition - is simple start-finish-start animation.
• animation- more advance start-finish animation in which you need to manage frames.

.animations {
  display: flex;
  padding: 80px;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #f3d2d2, white, #cee5f3);
}
.animations > div {
  width: 200px;
  height: 200px;
  margin: 40px;
  font-family: system-ui;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.animations > p {
  color: black;
  flex: 1;
  text-align: center;
}
.animations .animated-box {
  flex: 2;
  width: 100%;
  background: grey;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.animated-box.scale-up {
  animation: scale-down 0.5s ease-in forwards;
}

.animated-box.scale-up:hover {
  animation: scale-up 0.5s ease-in forwards;
}

.animated-box.scale-up-with-mouseout {
  transition: transform 0.5s ease-in;
}
.animated-box.scale-up-with-mouseout:hover {
  transform: scale(1.2);
}

@keyframes scale-up {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes scale-down {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

 <div class="animations">
      <div>
        <div class="animated-box scale-up">Hover me</div>
        <p>Scale up (with keyframes)</p>
      </div>
      <div>
        <div class="animated-box scale-up-with-mouseout">Hover me</div>
        <p>Scale up (with transition)</p>
      </div>
    </div>

这篇关于如何在关键帧中实现鼠标移开的反向动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！