时间戳

首页 > 解决方案 > CSS 动画：永久淡出

css - CSS 动画：永久淡出

问题描述

我有一个 div，我用 css 淡入（从右到左）：

CSS:
#mydiv {
   animation: slideIn 1s ease 0s 1;
}

@keyframes slideIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

当我单击关闭按钮时，它应该以相同的方式淡出：

JS:
$("#close").on('click', function(e) {
  $("#mydiv").css({ 'animation': 'slideOut 1s ease 0s 1' });
});

CSS:
@keyframes slideOut {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

淡出动画有效，但淡出后，mydiv 立即出现在初始位置。我能做些什么来防止这种情况发生？使用jQuery设置display:none动画后，抑制动画。

标签： csscss-animations

解决方案

也许您正在寻找的是animation-fill-mode财产。它使<div>元素在动画结束时保留最后一个关键帧的样式值。你可以在这里阅读

推荐阅读