Animation with Animate css3

Asked

Viewed 96 times

1

I’m putting together an animation with the 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>
<link rel="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 start the cascade animation, that’s when the first li comes in the middle of the animation the second starts, then the third starts when the second is in the middle and so goes.

html css animate
  • 1

    https://jsfiddle.net/kbneq9uu/1/ See if it looks like this or if that’s what you want.

  • opa this serves and very well thank you ^^

  • So I’ll post as an answer...

  • so I added it to my html and it didn’t work :(

  • It’s because I did it in SCSS. Now in my reply I compiled and did it in CSS. See...

  • what is the difference of scss and css?

  • Virtually none. SCSS, LESS are CSS preprocessors. You write CSS in a different way. It is compiled and becomes a .css. file Take a read on the internet matters. It is easy and when you start using it will never stop...

Show 2 more comments

1 answer

1


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

  • 1

    perfect thank you very much ^^

Browser other questions tagged html css animate

You are not signed in. Login or sign up in order to post.