Question

我有一个元素会在初始页面加载时显示一些动画。之后，元素应该被隐藏，永远不会再显示。

此元素包含在父容器中。某些用户交互可能会隐藏父容器（display:none或hidden属性）。每次重新显示父容器后，该元素将再次动画，我想阻止它。为什么每次重新显示元素时都会重新生成动画？任何CSS规则禁用此行为？

这是here。将鼠标悬停在链接上并将其悬停后，该元素将再次显示动画。

是否可以通过纯CSS阻止它，不涉及任何Javascript？怎么样？

Answer 1

如果动画元素的目标基本消失并且在动画完成后不重叠任何内容，则可以取出动画的前进状态，并使.block元素的固有高度为0px。然后将0％和100％关键帧设置为您想要的高度（100px），并且在动画完成后，块将会消失，所有意图和目的，高度为0且没有可点击区域。

@keyframes drop {
  0% {
    transform: translateY(-150%);
    opacity: 0;
    height: 100px;
  }
  15% {
    transform: translateY(10%);
  }
  20% {
    transform: translateY(-10%);
  }
  25% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1);
    opacity: 1;
    height: 100px;
  }
}
.block{
  width:100px;height:0px;background:black;
  animation: 1.3s 2 alternate drop;
}

重新显示元素后阻止CSS动画

1 个答案: