随着技术的不断发展，CSS动画的应用越来越广泛，其中一种比较常见的动画效果就是当鼠标滚动到一定位置时触发动画。下面就来介绍一下如何实现这种效果。

/* 使用CSS3新增的@keyframes关键字定义动画过程 */
@keyframes example {
/* 0%表示动画开始前的状态，100%表示动画结束后的状态 */
0% {opacity: 0;} 
100% {opacity: 1;}
}
/* 当鼠标滚动到div元素时，触发动画 */
div {opacity: 0;}
div.animate {animation-name: example; animation-duration: 1s; animation-fill-mode: forwards;}

首先我们需要定义一段CSS3动画过程，使用@keyframes关键字，指定动画开始前和结束后的状态。这里以文字逐渐出现的效果为例，开始时文字是不可见的，然后逐渐变得清晰可见。

然后我们需要在HTML中设置需要触发动画的元素，这里以一个div元素为例。一开始，我们使用opacity属性将其设置为完全不可见的状态。接着，当鼠标滚动到该元素所在的位置时，我们使用JavaScript或jQuery监听鼠标滚动事件，触发元素添加animate类名。这里我们使用animation-name指定动画的过程，animation-duration指定动画时长，animation-fill-mode指定动画结束后元素保持动画后的状态，即不再变回原来的状态。

通过这样的方式，我们就可以实现当鼠标滚动到一定位置时触发的动画效果了。