Как отменить css анимацию при втором нажатии

Question

Я создал анимацию, которая др aws и анимирует три строки.

1. сверху, справа налево
2. слева, сверху вниз
3. снизу, слева направо.

Оболочка содержимого - display: none, и при нажатии на #btn она отображается и анимируется строка. Я ожидаю, что анимация строки второго щелчка развернется, и оболочка содержимого должна go вернуться к display: none.

Я попробовал приведенный ниже код, но он не работал. Кто-нибудь может дать мне несколько советов, что делать?

$('#btn').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
    $('.content-wrapper').css({
      'display': 'none'
    });
  } else {
    $('.content-wrapper').css({
      'display': 'block'
    });
  }
  $(this).data("clicks", !clicks);
});

.content-wrapper {
  display: none;
  width: 68.5%;
  height: 60%;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
}

.l-top,
.l-left,
.l-bottom {
  position: absolute;
  background: transparent;
  -webkit-animation-duration: .4s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-direction: alternate;
}

.l-top {
  top: 0;
  right: 0;
  height: 1px;
  -webkit-animation-name: l-top;
  -webkit-animation-delay: 0s;
}

.l-left {
  top: 0;
  left: 0;
  width: 1px;
  -webkit-animation-name: l-left;
  -webkit-animation-delay: .4s;
}

.l-bottom {
  left: 0;
  bottom: 0;
  height: 1px;
  -webkit-animation-name: l-bottom;
  -webkit-animation-delay: .8s;
}

@-webkit-keyframes l-top {
  0% {
    width: 0;
    background: red;
  }
  100% {
    width: 100%;
    background: red;
  }
}

@-webkit-keyframes l-left {
  0% {
    height: 0;
    background: red;
  }
  100% {
    height: 100%;
    background: red;
  }
}

@-webkit-keyframes l-bottom {
  0% {
    width: 0;
    background: red;
  }
  100% {
    width: 100%;
    background: red;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btn">btn</btn>
  <div class="content-wrapper">
    <span class="l-top"></span>
    <span class="l-left"></span>
    <span class="l-bottom"></span>
    <p>content</p>
  </div>

Answer 1

Как насчет использования переходов вместо анимации? Мне пришлось анимировать ширину самой оболочки содержимого, чтобы она не была скрытой, а просто шириной 0, но это практически то же самое.

$('#btn').click(function() {
  $('.content-wrapper').toggleClass('open');
});

.content-wrapper {
  display: block;
  width: 0;
  height: 60%;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
  background: transparent;
  overflow: hidden;
  transition: width .1s 1.2s;
}

.content-wrapper.open {
  width: 68.5%;
  transition: width .1s;
}

.l-top,
.l-left,
.l-bottom {
  position: absolute;
  background: red;
}

.content-wrapper .l-top {
  top: 0;
  right: 0;
  width: 0;
  height: 1px;
  transition: width .4s .8s;
}

.content-wrapper.open .l-top {
  width: 100%;
  transition: width .4s;
}

.content-wrapper .l-left {
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  transition: height .4s .4s;
}

.content-wrapper.open .l-left {
  height: 100%;
  transition: height .4s .4s;
}

.content-wrapper .l-bottom {
  width: 0;
  left: 0;
  bottom: 0;
  height: 1px;
  transition: width .4s;
}

.content-wrapper.open .l-bottom {
  width: 100%;
  transition: width .4s .8s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btn">btn</div>
<div class="content-wrapper">
  <span class="l-top"></span>
  <span class="l-left"></span>
  <span class="l-bottom"></span>
  <p>content</p>
</div>