如果更改页面，为什么动画不起作用？

Question

我有一个带有Bootstrap 3主题的Drupal 8网站。

我创建了一个带有新闻源的主页。只要网站上有出版物，它就会在新闻源中生成一条消息。邮件的状态可以为已读或未读。

我希望当.action-flag类在页面中时，在网站徽标上应用动画。

该网站的所有页面都包含CSS和JS文件。

当消息未标记为已读时，.action-flag类仅在主页上。

这是我主页的结构：

这是我的JS代码：

  if ($("#pills-private .action-flag").length) {
    $(".region-navigation-logo img").addClass("timeline-notification");
  };

这是我的CSS代码：

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(138, 186, 18, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(138, 186, 18, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(138, 186, 18, 0);
    }
}

.region-navigation-logo img {
    height: 56px;
    border-radius: 50%;
    background: #8aba12;
}

.timeline-notification {
    box-shadow: 0 0 0 rgba(138, 186, 18, 1);
    animation: pulse 2s infinite;
}

当前，动画效果很好。但前提是我在首页上。如果我转到另一个页面，动画将不再起作用。

问题

仅当我转到主页时它才有效。我希望它能在整个网站上正常工作。目的是通知用户其新闻源中有新活动可用。

有解决方案吗？