<div class="container">
	<div class="demo demo0">	
		<h4>display + transition 强制重绘 offsetHeight</h4>
		<div class="box box0"></div>
		<button id="btn0">active</button>
	</div>
	
	<div class="demo demo1">	
		<h4>Visibility + transition</h4>
		<div class="box box1"></div>
		<button id="btn1" class="btn">active</button>
	</div>
	
	<div class="demo demo2">	
		<h4>transitionEnd</h4>
		<div class="box box2" id="box2"></div>
		<button id="btn2" class="btn">active</button>
	</div>
	
	<div class="demo demo3">	
		<h4>-webkit-animation-direction</h4>
		<select id="direction" class="info_panel">
			<option value="normal">normal</option>
			<option value="alternate">alternate</option>
			<option value="alternate-reverse">alternate-reverse</option>
			<option value="reverse">reverse</option>
		</select>
		<div class="box box3 active" id="box3"></div>
	</div>
	
	<div class="demo demo4">	
		<h4>-webkit-animation-iteration-count</h4>
		<select id="transCountSlt" class="info_panel">
			<option value="infinite">infinite</option>
			<option value="1">1</option>
			<option value="2.5">2.5</option>
		</select>
		<div class="box box4 active" id="box4"></div>
	</div>
	
	
	<h4>Hover over the container to apply the animations to the elements.</h4>
	<strong>animation-fill-mode: none/forwards/backwards/both</strong>
	<div class="demo demo5">
		
  <div class="module">
    <p><code>none</code></p>
    <div class="wrapper">
      <div class="element element-1"></div>
    </div>
  </div>
		
  <div class="module">
    <p><code>forwards</code></p>
    <div class="wrapper">
      <div class="element element-2"></div>
    </div>
  </div>
		
  <div class="module">
    <p><code>backwards</code></p>
    <div class="wrapper">
      <div class="element element-3"></div>
    </div>
  </div>
		
  <div class="module">
    <p><code>both</code></p>
    <div class="wrapper">
      <div class="element element-4"></div>
    </div>
  </div>
		
</div>
	
	
	
	<div class="demo demo6" id="demo6">	
		<h4>animation .enter .leave</h4>
		<div class="box6" id="box6"></div>
	</div>
	
	
</div>



html,body{height: 100%;} * { box-sizing: border-box; }
.container { display: flex; justify-content: center; align-items: center; min-height: 100%; flex-direction: column; padding-top: 20px;}

.demo {
	border: 1px solid;
	margin: 20px;
	padding: 30px;
	width: 80%;
	min-height: 150px;
}

.box0{
	width: 100px;height: 100px;
	background: #62D58A; display:none;
	transition-property: width, height, background;
	transition-duration: .2s, .3s, .4s;
	&.active{
		width: 200px; height: 150px;
		background: #78B715;
	}
}

.box1 {
	width: 0;
	height: 0;
	background: #000;
	visibility: hidden;
	transition: all .3s;
}
.box1.active{
	visibility: visible;
	width: 200px;
	height: 150px;
	background: red;
}

.box2 {
	width: 100px; height: 100px; border-radius:50%;
	background: #07c; transition: all .3s .5s;
	&.active{
		transform: translateX(100px);
		background: red;
		width: 120px;
	}
}

.box3, .box4 {
	width: 50px; height: 50px; background: #00BD9C;
}
.box3.active, .box4.active {
	animation: ani-trans 1.5s linear infinite .5s;
}
@keyframes ani-trans {
	form{ transform: translate3d(0,0,0)}
	to { transform: translate3d(300px, 0, 0)}
}
.box6{
	width: 100px;height: 100px;background: #000;
	&.enter{
		animation: ani-trans-enter 2s both;
	}
	&.leave{
		animation: ani-trans-leave 2s both;
	}
}

@keyframes ani-trans-enter{
	0%{ transform: translate3d(0,0,0)}
	100% { transform: translate3d(300px, 0, 0)}
}
@keyframes ani-trans-leave {
	0% { transform: translate3d(300px, 0, 0)}
	100%{ transform: translate3d(0,0,0)}
}

.demo5 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0 10px;
	.module{
		height: 100px;
		flex: 1;
		margin: 10px;
		p{ text-align: center; }
		.wrapper {
			border:1px dashed #d6d6d6;
			border-radius: 5px;
			height: 80px;
			.element {
				border-radius: 5px;
  			background-color: purple;
				height: 100%;
				transform-origin: bottom left;
			}
		}
	}
	
	&:hover .element{
		animation-name: ani-rotate;
		animation-duration: 1s;
		animation-timing-function: cubic-bezier(.18, 1.03, .5, 1.62);
	}
}
.element-1 { animation-fill-mode: none; }
.element-2 { animation-fill-mode: forwards;}
.element-3 { animation-fill-mode: backwards; animation-delay: 1s; }
.element-4 { animation-fill-mode: both; animation-delay: 1s;}

@keyframes ani-rotate {
  0% {
    background-color: orange;
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
    background-color: #0099CC;
  }
}
View Compiled
$('.btn').click(function(){
	var $this = $(this);
	$this.prev().toggleClass('active');
})

$('#btn0').click(function(){
	var $this = $(this), $box = $this.prev();
	if($box.hasClass('active')){
		$box.removeClass('active');
		$box[0].offsetHeight = $box[0].offsetHeight;
		$box.one('transitionend',function(){
			$box.css('display','none');
		})
	}else{
		$box.css('display','block');
		$box[0].offsetHeight = $box[0].offsetHeight;
		$box.addClass('active');
		// setTimeout(()=>$box.addClass('active'), 4)
		
	}
})

$('#box2').on('transitionend', function(e){
	console.log(e);
})

$('#direction').on('change', function(e){
	var $box = $('#box3'), oBox = $box[0], v = $(this).val();
	$box.removeClass('active');
	setTimeout(()=>{
		$box.addClass('active');
		oBox.style.animationDirection = v;
		oBox.style.webkitAnimationDirection = v;
	}, 300)
})

$('#transCountSlt').change(function(e){
	var $box = $('#box4'), oBox = $box[0], v = $(this).val();
	$box.removeClass('active');
	setTimeout(()=>{
		$box.addClass('active');
		oBox.style.animationIterationCount = v;
		oBox.style.webkitAnimationIterationCount = v;
	}, 300)
})
// animationIterationCount
$('#demo6').on('mouseenter',function(){
	$('#box6').addClass('enter').removeClass('leave');
}).on('mouseleave', function(){
	$('#box6').addClass('leave').removeClass('enter');
})
Rerun