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

Posted 2023-03-04

【中文标题】单击时背景位置的 CSS 滑动动画

【英文标题】：CSS Sliding Animation for Background Position on click

【发布时间】：2022-01-13 04:49:24

【问题描述】：

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

【参考方案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%);
  

【讨论】：

很棒的人。没想到在关键帧内再次使用background-image。非常感谢@Lukas Hadja