应用关键帧后如何反转

Question

enter code here以下是我正在应用的动画。它工作正常。

.sidebar.right.expand{
 animation-name: reducetime;
 animation-duration: 1s;
 display:block !important

$(document).ready(() => {

	$('.show').on('click', () => {
  	$('.child').addClass('show');
  })
  
  $('.hide').on('click', () => {
  	$('.child').addClass('hide');
  })
  
})

.child{
  width:0;
  height:0;
  border:2px solid red;
  overflow:hidden;
}

.child.show{
   animation-name: expandit;
   animation-duration: 1s;
   width:100px;
   height:100px;
}

.child.hide{
   animation-name: hideit;
   animation-duration: 1s;
   animation-direction: reverse;
}


@keyframes expandit {
  0% {
    width: 0;
  }
  100% {
    width: 100px;
  }
}

@keyframes hideit {
  0% {
    width: 0;
  }
  100% {
    width: 100px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <a class="show" href="#">Show</a>
  <a class="hide" href="#">Hide</a>
  <div class="child">
    
  </div>
</div>

;最大宽度：668px;宽度：668px；}

@keyframes reducetime {
  0% {
    width: 0;
  }
  100% {
    width: 668px;
  }
}

现在用户单击关闭按钮。我想通过使用关键帧恢复为0的宽度，如果可以的话，我该怎么办？

有人帮我吗？

Answer 1

您可以使用

animation-direction: reverse;

删除扩展类时