CSS动画不动答案

【问题标题】：CSS animation not movingCSS动画不动
【发布时间】：2021-12-08 22:55:42
【问题描述】：

我很难理解为什么 css 动画没有从我正在使用的代码中移动。

我创建了一个代码笔 - https://codepen.io/gezzamondo/pen/OJxXLZq

我使用的 CSS 是...

.effect-snow {
  background-image: url(http://www.sosweetshop.co.uk/wp-content/themes/flatsome/assets/img/effects/snow1.png), url(http://www.sosweetshop.co.uk/wp-content/themes/flatsome/assets/img/effects/snow2.png);
  -webkit-animation: snow 20s linear infinite;
  animation: snow 20s linear infinite;
}

body {
  background-color: coral;
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  right: 0;
  bottom: 0;
  padding: 0 !important;
  margin: 0 !important;
}

.no-click {
  pointer-events: none;
}

&lt;div class="effect-snow bg-effect fill no-click"&gt;&lt;/div&gt;

任何建议将不胜感激

【问题讨论】：

您正在调用 snow 动画，但尚未在任何地方定义 @keyframes snow {}。
当然....抱歉，我太笨了

标签： css css-animations

【解决方案1】：

正如 rwacarter 所述，您需要使用 @keyframes 实际定义动画“snow”。这是您实际编码动画期间发生的更改的地方。

这只是一个基本示例，但您可以从以下内容开始：

.effect-snow {
  background-image: url(http://www.sosweetshop.co.uk/wp-content/themes/flatsome/assets/img/effects/snow1.png), url(http://www.sosweetshop.co.uk/wp-content/themes/flatsome/assets/img/effects/snow2.png);
  -webkit-animation: snow 20s linear infinite;
  animation: snow 20s linear infinite;
}

body {
  background-color: coral;
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  right: 0;
  bottom: 0;
  padding: 0 !important;
  margin: 0 !important;
}

.no-click {
  pointer-events: none;
}

@keyframes snow {
  from {
    background-position: 0 100%;
  }

  to {
    background-position: 0 0;
  }
}

&lt;div class="effect-snow bg-effect fill no-click"&gt;&lt;/div&gt;

【讨论】：