CSS 单击背景位置的滑动动画

Question

我有以下 code 动画 background-position 属性所以它之后“滑动”到不同的颜色。我目前的问题是如何扭转它。我见过的大多数例子都在 hover 附近；这个虽然来自点击事件的上下文。关于如何在重新切换动画时反转动画有什么想法吗？

Answer 1

问题出在 CSS 文件中，试试这个：

#box {
  width: 200px;
  height: 100px;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, red 50%, black 50%);
}

.slide-in {
  animation: slide-in 0.5s forwards;
}

.slide-out {
  animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  100% {
    background-position-x: -100%;
  }
}

@keyframes slide-out {
  0% {
    background-position-x: 0%;
    background-image: linear-gradient(to right, black 50%, red 50%);
  }
  100%{
    background-position-x: 100%;
    background-image: linear-gradient(to right, black 50%, red 50%);
  }
}

CSS 单击背景位置的滑动动画

CSS Sliding Animation for Background Position on click

html

javascript

css

css-animations