鼠标离开时的 CSS 动画

Question

所以我正在尝试做一些像tiles或者netflix那样的事情。我有一个盒子，我试图让它在鼠标悬停时变大，并在鼠标离开时缩小尺寸。到目前为止我有这个。

.nav {
  position: relative;
  top: 25%;
  width: 100%;
  color: black;
  text-align: center;
}
.nav a {
  color: white;
  text-decoration: none;
}
.link {
  font-size: 24px;
  width: 100%;
  height: 25%;
  background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
  display: inline;
  padding-right: 12.5%;
  padding-left: 12.5%;
  padding-bottom: 6.25%;
  padding-top: 6.25%;
  box-shadow: 0px 0px 10px 5px grey;
  animation-name: downsize;
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.link:hover {
  animation-name: resize;
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  font-size: 32px;
  padding-right: 14.5%;
  padding-left: 14.5%;
  padding-bottom: 8.25%;
  padding-top: 8.25%;
}

<div class="nav">
  <a href="/public/MM/EnterUp">
    <div class="link" style="margin-right: 15px;">
      Enter Up
    </div>
  </a>
  <a href="/public/MM/EnterUp">
    <div class="link" style="margin-right: 15px;">
      View Ups
    </div>
  </a>
</div>

我使用CSS-Tricks 让它在鼠标悬停后缩小。我的问题是，与 CSS-Tricks 不同，当您加载页面时，我不希望动画downsize在鼠标离开后运行。有人有解决办法吗？谢谢您的帮助！

Answer 1

虽然 CSS 中没有等效的mouseleave或mouseout事件，但您可以通过将“exit”转换应用到选择器，然后使用:hover伪类用“enter”转换覆盖它来实现相同的行为，如下所示：

div{
    background:#000;
    color:#fff;
    font-size:16px;
    line-height:100px;
    text-align:center;
    transition:font-size .5s ease-out,line-height .5s ease-out,width .5s ease-out;
    width:100px;
}
div:hover{
    font-size:20px;
    line-height:125px;
    transition:font-size .25s ease-in,line-height .25s ease-in,width .25s ease-in;
    width:125px;
}
/* HOUSEKEEPING */
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
body,html{height:100%;}
body{align-items:center;display:flex;justify-content:center;}

<div>Text</div>

或者，如果transition您希望在两种情况下应用相同，只是相反，则无需在:hover选择器中覆盖它。