滚到固定位置播放动画(用的hover)

最近在做CSS3的动效，但是网页一般有滚动条，在下方的动画还没等鼠标滚到那就已经播完了，然后我想让滚动条滚动到固定位置再播放动画，又懒得写js，就用hover代替了

先用-webkit-animation-play-state:paused;使动画处于暂停播放的状态

@-webkit-keyframes silder-left {
/*动画效果是，从上往下滑动*/
	    0% {opacity: 0;transform: translate(0, -200px);}
	    100% {opacity: 1;}
 }
.box01{
	    background-image: url(/uploads/32/16121/picture/2020/6/112822_3zhan.png);
		-webkit-animation-play-state:paused; /*先让动画处于暂停状态*/
	    -webkit-animation-name: silder-left; /*动画名称*/
	    -webkit-animation-duration: 1s; /*动画持续时间*/
	    -webkit-animation-iteration-count: 1; /*动画次数*/
	    -webkit-animation-delay: 0s; /*延迟时间*/
	    -webkit-animation-fill-mode:backwards;/*动画还没开始播的时候使用0%时的状态*/
    }

选一个最大的div来进行hover，一般我们滑动滚动条的时候鼠标都是在页面里，然后当鼠标悬浮在这个页面上的时候播放动画，这边一定要指定哪个类里的动画播放

#page02:hover .box01{
-webkit-animation-play-state:running;
}

<div id="page02">
	<div class="label">
		<div class="dialog box01">
			<h6>充电</h6>
			<p>车辆在行驶过程中即可充电</p>
		</div>
		<div class="dialog box02">
			<h6>充电</h6>
			<p>车辆在行驶过程中即可充电</p>
		</div>
	</div>
</div>