Animate the appearance of list items sequentially using CSS animations

Question

Animate the appearance of list items sequentially using CSS animations

Is there a simpler way to achieve the effect of having list items slide in one after the other? The CSS method provided here seems quite intricate.

#nav ul.is-visible{visibility:visible;opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform 0.3s,visibility 0 0;transition:transform 0.3s,visibility 0 0}
    #nav ul.is-visible li:nth-child(1){-webkit-animation:slide-in .2s;animation:slide-in .2s}
    #nav ul.is-visible li:nth-child(2){-webkit-animation:slide-in .3s;animation:slide-in .3s}
    #nav ul.is-visible li:nth-child(3){-webkit-animation:slide-in .4s;animation:slide-in .4s}
    #nav ul.is-visible li:nth-child(4){-webkit-animation:slide-in .5s;animation:slide-in .5s}
    #nav ul.is-visible li:nth-child(5){-webkit-animation:slide-in .6s;animation:slide-in .6s}
    #nav ul.is-visible li:nth-child(6){-webkit-animation:slide-in .7s;animation:slide-in .7s}
    #nav ul.is-visible li:nth-child(7){-webkit-animation:slide-in .8s;animation:slide-in .8s}
    #nav ul.is-visible li:nth-child(8){-webkit-animation:slide-in .9s;animation:slide-in .9s}

jquery css

Answer 1

Answer №1

Hello @Mark, I have a code snippet that might be useful for creating a list with sliding animation:

<style>
   ul li
   { display:inline; }

  .slider
  { width:100%; overflow:hidden; }

  ul { animation: slide-left 20s; }

  @keyframes slide-left {
    from {
     margin-left: 100%; width: 300%; 
    }

   to {
     margin-left: 0%; width: 100%;
    }
   }
 </style>

 <body>

    <div class="slider"> 
       <ul style="list-style-type:none;">
          <li> List Item 1 </li>
          <li> List Item 2 </li>
          <li> List Item 3 </li>
          <li> List Item 4 </li>
      </ul>
    </div>

 </body>

Answer 2

Hello @Mark, I have a code snippet that might be useful for creating a list with sliding animation:

<style>
   ul li
   { display:inline; }

  .slider
  { width:100%; overflow:hidden; }

  ul { animation: slide-left 20s; }

  @keyframes slide-left {
    from {
     margin-left: 100%; width: 300%; 
    }

   to {
     margin-left: 0%; width: 100%;
    }
   }
 </style>

 <body>

    <div class="slider"> 
       <ul style="list-style-type:none;">
          <li> List Item 1 </li>
          <li> List Item 2 </li>
          <li> List Item 3 </li>
          <li> List Item 4 </li>
      </ul>
    </div>

 </body>

Animate the appearance of list items sequentially using CSS animations

Answer №1

Similar questions

Setting the outcome of an Ajax call as a global variable in JavaScript

Steps for generating an observable that mirrors the structure of an observable array

Attempting to resolve an error message with the help of JQuery

Ways to apply CSS to a changing div ID

Utilizing CSS in JS for nested hover styles with Material UI: a step-by-step guide

Accumulation of style from various directives in AngularJS on a single element

Guide on updating directory images by uploading a new one directly onto the site

Modifying the verbiage in the menu based on location

The dropdown menu in the navigation bar is not properly lined up with its corresponding menu item

Apply the CSS style to make one element identical to another, while modifying a single property

Exploring the wonders of jquery's JSON parsing capabilities

What steps can be taken to update the ID's of <tr> and <td> elements within a table after deleting a row?

What a great method to execute a button click within the same button click using jQuery!

Enhancing a class's properties from its parent component using React

Update the Div when Fancybox is Closed

"Upon completion of Uploadify, the queue will undergo a

Add a stylish diagonal touch to your header and footer using CSS

effective ways to extract objects from nested structures using a specific identifier

Retrieve the identifiers of various HTML elements and store them in an array

Adjusting Classes in JavaScript with jQuery