JSFiddle - React, Tailwind, and code Playground

css3 animation in sequence.

by Andrew Pougher

HTML

<div id="logo-pane" class="opacity-fix">
  <div class="container clr">
    <div class="clr">
      <h2>Working With</h2>
      <ul>
        <li style="animation-delay: 100ms; -webkit-animation-delay: 100ms;">
          <img src="//placehold.it/170x80/ece344/ffffff/&text=Andrew" alt="Andrew" width="170" height="80" scale="2">
        </li>
        <li style="animation-delay: 200ms; -webkit-animation-delay: 200ms;">
          <a href="#" target="_blank"> <img src="//placehold.it/170x80/e3e4ed/ffffff/&text=Andrew" alt="Andrew" width="170" height="80" scale="2"></a>
        </li>
        <li style="animation-delay: 300ms; -webkit-animation-delay: 300ms;">
          <a href="#" target="_blank"> <img src="//placehold.it/170x80/cdedcd/ffffff/&text=Andrew" alt="Andrew" width="170" height="80" scale="2"></a>
        </li>
        <li style="animation-delay: 400ms; -webkit-animation-delay: 400ms;">
          <a href="#" target="_blank"> <img src="//placehold.it/170x80/534edd/ffffff/&text=Andrew" alt="Andrew" width="170" height="80" scale="2"></a>
        </li>
        <li style="animation-delay: 500ms; -webkit-animation-delay: 500ms;">
          <a href="#" target="_blank"> <img src="//placehold.it/170x80/31cccc/ffffff/&text=Andrew" alt="Andrew" width="170" height="80" scale="2"></a>
        </li>
        <li style="animation-delay: 600ms; -webkit-animation-delay: 600ms;">
          <a href="#" target="_blank"> <img src="//placehold.it/170x80/6543cd/ffffff/&text=Andrew" alt="Andrew" width="170" height="80" scale="2"></a>
        </li>
        <li style="animation-delay: 700ms; -webkit-animation-delay: 700ms;">
          <a href="#" target="_blank"> <img src="//placehold.it/170x80/3de3ee/ffffff/&text=Andrew" alt="Andrew" width="170" height="80" scale="2"></a>
        </li>
        <li style="animation-delay: 800ms; -webkit-animation-delay: 800ms;">
          <a href="#" target="_blank"> <img src="//placehold.it/170x80/3de345/ffffff/&text=Andrew" alt="Andrew" width="170"...

CSS

.clr:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  zoom: 1;
}

#logo-pane {
  background-color: #000;
  color: #3eaae8;
  text-align: center;
  padding: 50px 0 42px 0;
}

#logo-pane ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  padding: 20px 0 0 0;
}

#logo-pane ul li {
  display: inline-block;
  *display: inline;
  /*IE7*/
  *zoom: 1;
  /*IE7*/
  text-align: center;
  margin: 15px 4px;
}

#logo-pane.opacity-fix ul li {
  opacity: 0;
}

#logo-pane.activated ul li {
  -webkit-animation: fade-in-up 600ms;
  /* Safari 4+ */
  -moz-animation: fade-in-up 600ms;
  /* Fx 5+ */
  -o-animation: fade-in-up 600ms;
  /* Opera 12+ */
  animation: fade-in-up 600ms;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes fade-in-up {
  0% {
    opacity: 0;
    -ms-transform: translate(0, 40px);
    -webkit-transform: translate(0, 40px);
    transform: translate(0, 40px);
  }
  100% {
    opacity: 1;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-moz-keyframes fade-in-up {
  0% {
    opacity: 0;
    -ms-transform: translate(0, 40px);
    -webkit-transform: translate(0, 40px);
    transform: translate(0, 40px);
  }
  100% {
    opacity: 1;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-o-keyframes fade-in-up {
  0% {
    opacity: 0;
    -ms-transform: translate(0, 40px);
    -webkit-transform: translate(0, 40px);
    transform: translate(0, 40px);
  }
  100% {
    opacity: 1;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    -ms-transform: translate(0, 40px);
    -webkit-transform: translate(0, 40px);
    transform: translate(0, 40px);
  }
 ...

JavaScript

var window_height = $(window).height();
        var scroll_position = $(this).scrollTop();
        var signin_container_height = $('#logo-pane').outerHeight(true);
          $('#logo-pane').removeClass('activated').addClass('activated');
        $(window).resize(function() {
            window_height = $(window).height();
            var winw = $(window).width();
            var header_height = $('#logo-pane').height();
  // alert(window_height)
        if (window_height < 231) {
                $('#logo-pane').removeClass('activated')
            } else {
                $('#logo-pane').removeClass('activated').addClass('activated')
            }
        });