CSS监听事件，定时器也能轻松玩转！

平时工作中很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法，一起了解一下吧，相信对你会有所帮助。

鼠标移入停止，移出继续

以下代码利用CSS的hover伪类来控制定时器，当鼠标移入元素时停止定时器，移出元素时重新开始定时器。

.element {
  transition: all 1s;
}

.element:hover {
  animation-play-state: paused;
}

设置定时器延迟

我们可以用CSS来自定义定时器延迟，只需要在元素的动画中设置适当的延迟即可。

.element {
  animation: fadein 2s ease-in forwards;
  animation-delay: 3s;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

上面的代码中，我们设置了元素在3秒后开始淡入动画，动画持续2秒，并且是缓入的。

定时器多次执行

有时我们需要定时器执行多次，而不仅仅是一次。我们可以用CSS的infinite伪类来实现这一目的。

.element {
  animation: fadein 2s ease-in infinite;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

上面的代码中，我们设置了元素无限次地淡入动画，每次动画持续2秒，并且是缓入的。

改变定时器速度

我们可以用CSS来自定义定时器速度，只需要在元素的动画中设置适当的速度即可。

.element {
  animation: fadein 2s linear infinite;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

上面的代码中，我们设置了元素无限次地淡入动画，每次动画持续2秒，并且是线性的（即匀速的）。

改变定时器方向

我们可以用CSS来自定义定时器方向，只需要在元素的动画中设置适当的方向即可。

.element {
  animation: fadein 2s alternate infinite;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

上面的代码中，我们设置了元素无限次地淡入淡出动画，每次动画持续2秒，并且是交替的（即先淡入后淡出）。

改变定时器填充模式

我们可以用CSS来自定义定时器填充模式，只需要在元素的动画中设置适当的填充模式即可。

.element {
  animation: fadein 2s ease-in forwards;
  animation-fill-mode: both;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

上面的代码中，我们设置了元素淡入动画，并且设置了填充模式为both，这意味着元素在动画结束后会保持最终状态。

改变定时器循环次数

我们可以用CSS来自定义定时器循环次数，只需要在元素的动画中设置适当的循环次数即可。

.element {
  animation: fadein 2s ease-in 3;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

上面的代码中，我们设置了元素淡入动画，并且设置了循环次数为3，这意味着元素将淡入3次。

总结

以上就是使用 CSS 来控制定时器的一些方法，希望对大家有所帮助。定时器在我们的工作中经常被用到，希望大家能熟练掌握这些技巧，以便在工作中更加游刃有余。