CSS动画未移动

Question

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

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

CSS im使用的是…

.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;
}

<div class="effect-snow bg-effect fill no-click"></div>

如有任何建议，将不胜感激

Answer 1

如rwacarter所述，您需要使用@keyframe实际定义动画">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;
}
}

<div class="effect-snow bg-effect fill no-click"></div>