CSS Anitmate hidden content - BROKEN

CSS Anitmate hidden content - BROKEN

HTML

<a href="#" class="js-link">Click Here</a>

<div class="js-content sr-only">
    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</p>
</div>

CSS

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

@-webkit-keyframes openIt {
  0% { height: 1px; color: #ff0000; }
  100% { height: 100px; color: #00ff00; }
}

.open {
  position: static;
  width: auto;
  padding: initial;
  margin: initial;
  overflow: visible;
  clip: auto;
  border: 0;
  -webkit-animation: openIt 2s linear;
  -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
}

JavaScript

var $link = $('.js-link'),
    $content = $('.js-content');
                 
$link.click(function(e) {
    e.preventDefault();
    
    if ( $content.hasClass('sr-only') ) {
        $content.removeClass('sr-only').addClass('open');
    }
    else if ( $content.hasClass('open') ) {
        $content.removeClass('open').addClass('sr-only');
    }
});