CODEWITHSUNDEEP
csscss-animations
Gezzamondo
Gezzamondo

Reputation: 1619

CSS animation not moving

I'm struggling to see why a css animation isn't moving from the code I'm using.

I've created a codepen - https://codepen.io/gezzamondo/pen/OJxXLZq

The CSS im using is...

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

Any advice would be appreciated

Upvotes: 0

Views: 103

Answers (1)

EssXTee
EssXTee

Reputation: 1798

As mentioned by rwacarter, you need to actually define the animation 'snow' with @keyframes. This is where you actually code the changes that occur during the animation.

This is just a basic example, but you could start with something like this:

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

Upvotes: 1

Related Questions