sass-animated-list-items.css

/* CSS Output */

li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}

li.show {
  height: 2em;
  margin: 2px 0;
}

.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}

.fade li.show {
  opacity: 1;
}

.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}

.slide-fade li.show {
  opacity: 1;
}

.swing {
  perspective: 100px;
}

.swing li {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
}

.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
}

.swing li {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
}

sass-animated-list-items.html

<!-- HTML code -->

<ul id="list">
  <li class="show">List item</li>
  <li class="show">List item</li>
</ul>
<button id="add-to-list">Add a list item</button>

<!-- A Little JavaScript -->

<!-- For the purpose of the demo we’ll create a little JavaScript to add a new item to the list, then add the “show” class so that the animation can take place. -->
<!-- There’s a reason for using this two-step process. -->
<!-- If the list items were added in a visible state, there wouldn’t be any time for the transition to take place. -->
<!-- We could get around this by using an animation on the li elements, but this would be more difficult to override when removing the elements with another animation. -->

<!-- Add items to a list - from cssanimation.rocks/list-items/ -->
<script type="text/javascript">
  document.getElementById('add-to-list').onclick = function() {
  var list = document.getElementById('list');
  var newLI = document.createElement('li');
  newLI.innerHTML = 'A new item';
  list.appendChild(newLI);
  setTimeout(function() {
  newLI.addClass('show');
  }, 10);
}
</script>

sass-animated-list-items.sass

/* Sass code */

// Credit: https://cssanimation.rocks/list-items/
// To use the different classes shown below
// you will need to add/subtract classes to your HTML markup as needed

// General li styles
li
  list-style: none
  background: #d1703c
  color: #fff
  height: 0
  line-height: 2em
  margin: 0
  padding: 0 0.5em
  overflow: hidden
  width: 10em

// 1. No Animation

li.show 
  height: 2em
  margin: 2px 0
  
// 2. Fade

.fade li 
  transition: all 0.4s ease-out
  opacity: 0
  height: 2em

.fade li.show 
  opacity: 1
  
// 3. Slide down & Fade

.slide-fade li 
  transition: all 0.4s ease-out
  opacity: 0

.slide-fade li.show 
  opacity: 1

// 4. Swinging in

.swing 
  perspective: 100px

.swing li 
  opacity: 0
  transform: rotateX(-90deg)
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76)
  
.swing li.show 
  opacity: 1
  transform: none
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76)

// 5. Swinging from side


.swing li 
  opacity: 0
  transform: rotateY(-90deg)
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76)

sass-animated-list-items.scss

/* SCSS code */

// Credit: https://cssanimation.rocks/list-items/
// To use the different classes shown below
// you will need to add/subtract classes to your HTML markup as needed

// General li styles
li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}

// 1. No Animation

li.show {
  height: 2em;
  margin: 2px 0;
}

// 2. Fade

.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}

.fade li.show {
  opacity: 1;
}

// 3. Slide down & Fade

.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}

.slide-fade li.show {
  opacity: 1;
}

// 4. Swinging in

.swing {
  perspective: 100px;
}

.swing li {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
}

.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
}

// 5. Swinging from side

.swing li {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
}

// Credit: https://cssanimation.rocks/list-items/

Animating List Items

When parts of a web page change, adding some animation is a good way to help your viewers understand what’s going on. Animations can announce the arrival of new content, or draw attention to content that’s in the process of being removed. In this article we’ll look at how this can be used to help introduce new content, by showing and hiding items in a list.