Decrease visibility time of Announcement Bar message before transition

[luvlyandwilde]

I'm working with Clean Canvas' Symmetry theme and am looking to shorten the duration of time that any "announcement bar" message displays before it transitions into the next message, as it's currently static for too long IMO. Below is the .css code that applies to that announcement bar, but I can't seem to find a specification for how long it's visible. I can shorten / lengthen the transition time, but not the time it's visible. I'm not a serious coder by any means, but can find and adjust simple items. This one is puzzling me. Anyone know how to set a specific length of time that it's visible before the transition?

CSS Code:

.announcement-bar {
display: block;
position: relative;
z-index: 401; /* above header */
background-color: var(--bg-color);
background-image: var(--bg-gradient, none);
color: rgb(var(--text-color));
font-size: var(--smaller-text-size-1);
line-height: 1.4em;
}
.announcement-bar a {
color: rgb(var(--link-color));
text-decoration: none;
}
.announcement-bar a:hover {
text-decoration: none;
}
.announcement-bar .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.announcement-bar:not(.announcement-bar--with-announcement) .announcement-bar__left {
flex: 0 0 auto;
}
.announcement-bar .social {
margin-top: -8px;
padding-top: 0.8em;
padding-bottom: 0.8em;
}
.announcement-bar .social a {
margin: 8px 0 0;
margin-inline-end: 10px;
transition: color 100ms ease;
}
.announcement-bar .custom-select__btn {
transition: color 100ms ease;
}

.announcement-bar__left {
flex: 2 0 0;
}

.announcement-bar__middle {
position: relative;
flex: 1 1 auto;
text-align: center;
}
@media (min-width: 768px) {
.announcement-bar__middle:not(:first-child):not(:last-child) {
max-width: 50%;
}
}

.announcement-bar__right {
flex: 2 0 0;
text-align: end;
}

.announcement-bar__announcements {
position: relative;
margin: 0.8em 0;
font-size: var(--announcement-font-size);
}

.announcement-bar__link > .announcement-bar__announcements {
padding: 0;
}

@media (min-width: 768px) and (max-width: 999.98px) {
.announcement-bar--tablet-wrap .container {
flex-wrap: wrap;
}
.announcement-bar--tablet-wrap .announcement-bar__left {
flex: 0 0 auto;
}
.announcement-bar--tablet-wrap .announcement-bar__middle {
flex: 1 0 100%;
order: -1;
max-width: none !important;
}
}
.announcement-bar__link {
display: inline-block;
padding-top: 0.8em;
padding-bottom: 0.8em;
}

.announcement {
display: flex;
align-items: center;
color: rgb(var(--text-color));
/*
the following style and the next line-height lower risk of bold text (which may be
taller than normal-weight text) causing a jumping container
*/
min-height: 1.4em;
}
.announcement p {
margin: 0;
}
.announcement a {
text-decoration: underline;
text-underline-offset: 1px;
text-decoration-color: rgb(var(--link-color)/0.6);
text-decoration-thickness: 1px;
}
.announcement a:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(var(--link-color));
}
.announcement .countdown {
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.announcement .countdown:not([loaded]) {
visibility: hidden;
}
.announcement .countdown__grid {
--countdown-size: 1em;
}
.announcement .countdown__item:not(.countdown__item--is-0) {
--countdown-divider-width: calc(var(--countdown-size) / 2.4);
display: flex;
align-items: flex-start;
}
.announcement .countdown__unit {
direction: ltr;
align-self: flex-start;
margin-top: 0.14em;
margin-inline-start: 2px;
opacity: 0.5;
width: 1em;
font-size: calc(0.6 * var(--announcement-font-size));
line-height: 1;
letter-spacing: 2em;
-webkit-clip-path: polygon(0 -50%, 120% -50%, 120% 150%, 0 150%);
clip-path: polygon(0 -50%, 120% -50%, 120% 150%, 0 150%);
}

.announcement__text {
flex: 0 0 100%;
line-height: 1.3em;
transition: opacity 500ms ease-out 500ms, transform 700ms cubic-bezier(0.09, 0.49, 0.39, 0.99) 500ms;
}

.announcement--inactive {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: visibility 0s 300ms;
}
.announcement--inactive .announcement__text {
opacity: 0;
transform: translateY(8px);
transition: opacity 300ms ease-out 0s, transform 300ms ease-out 300ms;
}

.announcement-bar__announcement-controller {
position: absolute;
top: calc(100% - 4px);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.announcement-bar__announcement-controller:not(:focus-within) {
height: 0;
overflow: hidden;
clip: rect(0 0 0 0);
}
.announcement-bar__announcement-controller .announcement-button {
background: var(--bg-color);
color: inherit;
}

.announcement-text-separation-box {
margin-inline-start: 0.5em;
padding: 2px 7px;
background: rgb(var(--text-color)/0.2);
border-radius: var(--btn-border-radius);
}

.announcement-text-separation-dash::before {
content: "–";
margin: 0 0.4em;
}

.announcement-text-separation-dot::before {
content: "·";
margin: 0 0.3em;
}

.announcement-text-separation-space {
margin-inline-start: 0.5em;
}

.announcement-bg {
transition: opacity 300ms ease;
transition: opacity 300ms ease 300ms;
opacity: 0;
}
.announcement-bg.is-active {
transition-delay: 0s;
opacity: 1;
}
.announcement-bg:not(:has(+ .announcement-bg)) {
transition-delay: 0s;
}

[Raj-webdesigner · Accepted solution]

Add This Script On Your This css Code Below.

<script>
const announcements = document.querySelectorAll('.announcement-bar__announcements');
let currentIndex = 0;
const displayDuration = 5000; // Current duration (5000 ms = 5 seconds)

function showNextAnnouncement() {
  announcements[currentIndex].classList.remove('is-active');
  currentIndex = (currentIndex + 1) % announcements.length;
  announcements[currentIndex].classList.add('is-active');
  setTimeout(showNextAnnouncement, displayDuration); // Change the duration here
}
setTimeout(showNextAnnouncement, displayDuration);
</script>

 I Think This Is work.

[luvlyandwilde]

Thanks!