Css expando - mixed css

by amindunited

HTML

<div class="main">
  <div class="container">
    <div class="content">
      <ul>
        
      </ul>
    </div>
    
      <div class="trigger">
        Trigger
      </div>
  </div>
</div>

CSS

.content {
  //max-height: 40px;
  //overflow: hidden;
  //transition: all 2s ease-in-out;
}
.content.open {
  max-height: 9999px;
}
.content ul {
  //animation-name: anim;
  //animation-duration: 3s;
  //animation-direction: reverse;
  //transform-origin: top;
  //transform: scaleY(0);
  
}
.content.open ul {
  border: solid 5px red;
  animation: frames 1s ease 3;
  //animation-name: frames;
  //animation-duration: 3s;
  //animation-name: anim;
  //animation-duration: 3s;
  //animation-direction: forward;
}
.content.open ul li {
  background-color: rgba(255, 255, 0, .5);
}

@keyfames frames {
  0%  { width: 1px; }
  10% { width: 10px; }
  20% { width: 20px; }
  30% { width: 30px; }
  40% { width: 40px; }
  50% { width: 50px; }
  60% { width: 60px; }
  70% { width: 70px; }
  80% { width: 80px; }
  90% { width: 90px; }
  100%{ width: 100px; }
};

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Just for looks */
html, body {
  font-family: Helvetica;
  color: #666666;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 10px 25px;
  background-color: white;
  border-bottom: solid 2px #efefef;
}

.trigger {
  padding: 10px 25px;
  text-align: center;
  border-bottom: solid 2px #efefef;
}

JavaScript

var numberOfElements = 50;
var content = document.querySelector('.content');
var ul = document.querySelector('.content ul');

function createListElement (content) {
	var newListElement = document.createElement('li');
  newListElement.innerHTML = content;
  newListElement.classList.add("listElement");
  ul.appendChild(newListElement);
}

for ( var i = 0, len = numberOfElements; i < len; i++ ) {
	createListElement('List Element ' + i);
}

var trigger = document.querySelector('.trigger');
trigger.addEventListener('click', toggleList);
function toggleList () {
	var cl = content.classList;
  cl.toggle('open');
  
  //
  var target = document.querySelector('.content ul')
  console.log('...', target);
  target.removeEventListener("animationstart", animationListener, false);
  target.addEventListener("animationstart", animationListener, false);
}

function animationListener() {
	console.log('animation start');
}