CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-animations
Jackson
Jackson

Reputation: 820

CSS Animation to apply to elements one after the other?

I'm trying to use the CSS animation in my project.

everything works as it should. However, when I run my code, the CSS animation get applied to all the elements with the class .allPro at the same time.

Is there any way to apply the CSS animation individually?

For example, make the first element appear and then the second one and then third one and so on and so forth?

This is my code on FIDDLE

And this is my CSS code:

.allPro {
  width:150px;
  height:150px;
  float:left;
  margin:5px;
  background-color:#000;
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

The elements are created dynamically. So I cannot predict how many elements would be on the page.

I am willing to use jQuery to achieve what I'm trying to do.

EDIT:

This is how I get the elements created dynamically on my page and append them to the container:

$(document).ready(function() {
  var poutput = $('.dotted-list');
  $.ajax({
    url: 'https://mydonain.com/page.php',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status) {
      $.each(data, function(pi, item) {
        str = item.name;
        if (str.length > 2) str = str.substring(0, 2)
        var products = '<a class="allPro" data-id="' + item.id + '" data-name="' + item.name + '" data-type="' + item.type + '" href="" data-transition="slidefade">' + '<div class="products-feed-Small">' + '<div style="position:absolute; top:40%; text-align:center; width:100%; color:#fff; font-family:Walpurga; font-size:28px; font-weight:bold; text-decoration: none;">' + item.name + '</div>'

        +'<img src="62.jpg" >' + '</div>' + '</a>';
        poutput.append(products);
        $('.allPro').each(function() {
          var delay = $(this).index();
          $(this).css('animation-delay', delay + 's');
        });
        //$( "#load-more" ).show();
      });
    },
    error: function() {
      poutput.text('There was an error loading the data.');
    }
  });
});

Upvotes: 1

Views: 3282

Answers (1)

Harry
Harry

Reputation: 89780

One way to do this with jQuery (or JavaScript) would be to find the index of the element and then set the animation-delay based on it like in the below snippet.

One key thing to note is that I've added backwards (animation-fill-mode) to the animation. This is required because generally elements will remain in the default state until the animation's delay timer expires. In this case the default state is opacity: 1 (as there is no opacity setting on .allPro). It means all elements become visible at once and then when the animation actually starts, they blink.

By setting backwards as fill mode, we are instructing the UA that during the delay period the elements should hold the state as mentioned in the first keyframe. This change means that the elements get the opacity: 0 setting as soon as they are appended (because animation is added in default selector). So, they start to appear only when the animation is actually happening and not before it.

$(document).ready(function() {
  for (var i = 0; i < 10; i++) {
    $('body').append('<div class="allPro"></div>');
  }
  $('.allPro').each(function() {
    var delay = $(this).index();
    $(this).css('animation-delay', delay + 's');
  });
});
.allPro {
  width: 150px;
  height: 150px;
  float: left;
  margin: 5px;
  background-color: #000;
  animation: fadein 2s backwards;
}
@keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 3

Related Questions