在背景图像动画之后创建背景颜色 CSS3 动画

Posted 2023-02-24

【中文标题】在背景图像动画之后创建背景颜色 CSS3 动画

【英文标题】：Create Background Color CSS3 Animations after Background Image Animation

【发布时间】：2017-06-25 01:37:24

【问题描述】：

我正在尝试在第一个背景图像动画之后创建背景颜色 CSS3 关键帧动画。文本动画消失后，我无法创建另一个动画。文本动画消失后，我希望背景的不透明度变为 0.3 并再次淡入文本。以下是我所拥有的。

请在此处查看完整代码：codepen:https://codepen.io/imdaone/pen/JJrYyV

.background 
  width: 80%;
  height: 220px;
  margin: auto;
  background: url(imgs/ad-ex.png) no-repeat top left;
  background-size: 100%;
  animation: move 5s 1 linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;  

【问题讨论】：

格式化您的代码。

【参考方案1】：

看起来您正在尝试使用序列制作动画。如果我没记错的话，你不能用纯 css 来做。您可能想冒险使用一些 javascript 动画库来处理顺序动画。

你仍然可以使用 vanilla js，但我认为它更乏味只是为了实现你想要的