Question

我把这张卡片放在一起，当你将它悬停在它上面时，它会在它的x轴上翻转180度，然后展开。当我鼠标移开元素时，我希望这个元素以相反的方式向后翻转，就像它进入的方式一样。而不是当你像鼠标一样突然改回来的时候。

此外，应该注意的是，只要鼠标悬停在元素上，我希望动画使用animation: forwards。（即，只要用户悬停在元素上，它就应该保持翻转和放大。）

有没有办法只用CSS做到这一点？或者我需要Javascript吗？如果是这样，我想用纯香草JS做到这一点。

我一直在寻找Stack Overflow上的解决方案，而且似乎无法找到明确的答案，或者我没有输入正确的问题。

＆＃13;

html, body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

.container {
  width: 250px;
  height: 320px;
  margin: auto;
  position: relative;
  top: 35%;
}

img {
  width: 100%;
  max-height: 100%;
}

.flipcard {
  height: 100%;
  width: 100%;
  margin: auto;
  top: 20%;
  position: relative;
  box-shadow: 5px 5px 20px #94989e;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
} 

@keyframes grow {
  from {
    transform: rotateY(0) scale(1);
  }
  to {
    transform: rotateY(180deg) scale(2);
  }
}

.flipcard:hover {
  animation: grow 1s forwards;
}

.front-side  {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
  
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

＆＃13;

<div class='container'>
  <div class='flipcard'>
  <div class='front-side'>
    <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
  </div>
  <div class='back-side'>
    <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
  </div>
</div>
</div>

＆＃13;

Answer 1

发生这种情况的原因是因为在默认的非悬停状态下没有要返回的动画状态。你有两种选择。

不要使用动画，只需将效果转换为悬停。

通过这种方式，属性将返回到具有转换的非悬停状态。

.flipcard {
  height: 100%;
  width: 100%;
  margin: auto;
  top: 20%;
  position: relative;
  box-shadow: 5px 5px 20px #94989e;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transform: rotateY(0) scale(1);
  transition: all 0.3s ease;
} 

.flipcard:hover {
  transform: rotateY(180deg) scale(2);
}

https://jsfiddle.net/255mnwxr/5/

拥有动画属性。

这是最不希望的，因为在加载时动画将播放一次以使其动画，然后它会自然地起作用。

.flipcard {
  animation: return 1s forwards;
  height: 100%;
  width: 100%;
  margin: auto;
  top: 20%;
  position: relative;
  box-shadow: 5px 5px 20px #94989e;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
} 

@keyframes grow {
  from {
    transform: rotateY(0) scale(1);
  }
  to {
    transform: rotateY(180deg) scale(2);
  }
}

@keyframes return {
  from {
    transform: rotateY(180deg) scale(2);
  }
  to {
    transform: rotateY(0) scale(1);
  }
}

https://jsfiddle.net/255mnwxr/2/

Answer 2

您最好在正常状态和悬停状态之间使用transition 请注意，您必须在hover上跟踪.container以避免跳跃和闪烁。

html, body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

.container {
  width: 250px;
  height: 320px;
  margin: auto;
  position: relative;
}

img {
  width: 100%;
  max-height: 100%;
}

.flipcard {
  height: 100%;
  width: 100%;
  margin: auto;
  top: 20%;
  position: relative;
  box-shadow: 5px 5px 20px #94989e;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: all .5s ease-in-out;
} 

.container:hover .flipcard {
    transform: rotateY(180deg) scale(2);
}

.front-side  {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
  
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

<div class='container'>
  <div class='flipcard'>
  <div class='front-side'>
    <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
  </div>
  <div class='back-side'>
    <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
  </div>
</div>
</div>

如何在mouseout上平滑地反转此动画？

2 个答案: