CSS伪元素上的数字计数器动画

Question

我必须找到一种向此元素添加反派动画的方法：

.total-share-count:after {
    visibility: visible !important;
    position: absolute !important;
    top: -6px !important;
    left: 17px !important;
    content: '500' !important;
}

问题在于，计数器的编号是由CSS在伪元素上设置的。大多数计数器动画仅适用于普通元素。我无法修改原始的HTML容器，因为该元素是由外部javascript插件动态生成的。

另一个问题是在初始页面加载期间隐藏了计数器。仅当用户滚动页面的20％之后，计数器才会显示。因此，只有当伪元素在屏幕上可见时，动画才必须开始。

仅当可见时，是否有任何方法可以使计数器在伪元素上动画？

Answer 1

您可以像其他元素一样在伪类上使用关键帧动画。This article可能会有所帮助。