Question

css3如何规定当浏览到该元素时才执行相应的动画？

用户从上到一浏览网页时，当浏览到该div的位置时，这时这个div的css3动画才执行，而不是网页加载完就执行

Answer 1

可以使用伪类来实现(例如 div:hover)，在这个伪类选择器中添加要加入的动画名称，即可达到效果。举个例子：
<style>
.abc{ width:50px; height:50px; background:#000;}
.abc:hover{ animation:maozi 25s ease infinite;}
@keyframes maozi{
0%{ width:50px; height:50px;}
50%{ width:400px; height:400px;}
100%{ width:20px; height:60px;}
}
</style>
另外还有一种方法，就是使用js来实现添加一条class引用，效率没有伪类实现方法高。

Answer 2

你好 这个效果使用 js 来通过 事件触发 而达到的效果
希望能帮到你 谢谢