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

我有一个Drupal8站点，具有Bootstrap3主题

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

我希望当

.action标志

类位于页面中时，在站点的徽标上应用动画

CSS和JS文件包含在网站的所有页面上

当消息未标记为已读时，

.action标志

类仅在主页上

以下是我的主页结构：

以下是我的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;
}

目前，动画效果非常好。但前提是我在主页上。如果我转到另一页，动画将不再工作

问题

它只在我进入主页时起作用。我希望它能在整个网站上运行。目标是通知用户在其新闻提要中有新活动可用

---

是否有解决方案？

您好，CSS是全局附加的？您是否在每个页面上都包含了.CSS文件（全局如上面的注释），还是仅在您的主页上？您的其他页面是否有任何带有类

时间线通知的元素？“当“未读”类位于页面中时，我希望这样做”-您的jquery和css都不包含
。未读
。请包括所有相关代码。阅读一下。好的，我刚刚更新了我的问题