2018-11-22
要控制CSS3动画，实现滑动到当屏时才进行播放控制，一般需要结合JS或JQuery来实现更加复杂的控制。下面新图闻建站给大家作出实现方法思路和具体的控制代码。
CSS3动画滑动到当屏播放的实现思路分析
实现的方法和思路是当滑动到当前屏幕时需要控制HTML元素的可见性和可见时触发动画效果。控制元素的可见性可以使用CSS中的visibility:hidden/visible;来实现。当然也许会有人提出使用display:none/block来实现，但是这里不可以使用，原因是：display会使元素失去高度和宽度的属性，不方便使用JS来控制高度的变化。
控制CSS3动画滑动的当屏时控制可以使用动画元素的外部元素的onmouseover事件或scroll事件来触发，并且增加css样式。Css样式包括：元素可见、绑定动画。使用onmouseover来触发大家很容易理解，但是控制的精细程度不如scroll事件。使用scroll事件触发的原理是当然需要动画效果的元素到达屏幕的中间是触发动画操作，当然这个位置可以调节，根据动画元素的高度来决定，下面有具体的实例。下面是具体的控制CSS3动画效果的代码(我们使用scroll事件来控制)：
