Animation with animate css3

Question

Animation with animate css3

Navigation

#1 by (1 votes)

1

I'm putting together an animation with animate css3

.img-minibox{
	height:auto;
	max-height: 200px;
	overflow: hidden;
}
ul{
	list-style-type: none;
	margin-left:-40px;
}
ul li{
	float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<ul>

                  <a href=''>
                    <li class='col-sm-3 animated slideInDown'>
                      <div class='img-minibox'>
                        <img src='http://placehold.it/350x150' class='img-responsive'>
                      </div>
                    </li>
                  </a>
                  <a href=''>
                    <li class='col-sm-3 animated slideInDown'>
                      <div class='img-minibox'>
                        <img src='http://placehold.it/200x200' class='img-responsive'>
                      </div>
                    </li>
                  </a>
                  <a href=''>
                    <li class='col-sm-3 animated slideInDown'>
                      <div class='img-minibox'>
                        <img src='http://placehold.it/350x250' class='img-responsive'>
                      </div>
                    </li>
                  </a>
                  <a href=''>
                    <li class='col-sm-3 animated slideInDown'>
                      <div class='img-minibox'>
                        <img src='http://placehold.it/350x250' class='img-responsive'>
                      </div>
                    </li>
                  </a>
                </ul>

The animation works but what I want to do is to start the animation in a cascade, this is when the first one comes in half the animation the second one starts, so the third one starts when the second one is halfway and so it goes. p>

html css animate

asked by anonymous 28.10.2016 / 17:17

1 answer

How to use HTML or CSS in Android Studio? Click on the FAB but do not go to the new Intent

score 1 · Accepted Answer

.img-minibox {
  height: auto;
  max-height: 200px;
  overflow: hidden;
}

ul {
  list-style-type: none;
  margin-left: -40px;
}

ul li {
  float: left;
}

a:first-child li {
  animation-delay: 0s;
}
a:nth-child(2) li {
  animation-delay: 0.5s;
}
a:nth-child(3) li {
  animation-delay: 0.8s;
}
a:last-child li {
  animation-delay: 1.1s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<ul>

  <a href=''>
    <li class='col-sm-3 animated slideInDown'>
      <div class='img-minibox'>
        <img src='http://placehold.it/350x150' class='img-responsive'>
      </div>
    </li>
  </a>
  <a href=''>
    <li class='col-sm-3 animated slideInDown'>
      <div class='img-minibox'>
        <img src='http://placehold.it/200x200' class='img-responsive'>
      </div>
    </li>
  </a>
  <a href=''>
    <li class='col-sm-3 animated slideInDown'>
      <div class='img-minibox'>
        <img src='http://placehold.it/350x250' class='img-responsive'>
      </div>
    </li>
  </a>
  <a href=''>
    <li class='col-sm-3 animated slideInDown'>
      <div class='img-minibox'>
        <img src='http://placehold.it/350x250' class='img-responsive'>
      </div>
    </li>
  </a>
</ul>