Continuous Loop Ticker tape in Announcement Bar

[YeahJackie]

Hi,

I have made a ticker tape animation on my site using the announcement bar and the following CSS. 

.announcement-bar__message {
padding-left: 0px;
padding-right: 0px;
white-space: nowrap;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: marquee 2s linear infinite;
-webkit-animation: marquee 2s linear infinite;
animation: marquee 35s linear infinite;
}

.announcement-bar {
overflow: hidden;
height: 40px;
}

@-moz-keyframes marquee {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}

@-webkit-keyframes marquee {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}

@keyframes marquee {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@media only screen and (max-width: 800px) {
.announcement-bar__message {
font-size: 13px;
animation: marquee 20s linear infinite;
}
.home-page-video video {
width: 100%;
}
#shopify-section-slideshow img, .index-slideshow-section img {
height: unset !important;
/* opacity: 0.8 !important; */
}
#shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
height: 400px;
}

@-moz-keyframes marquee {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-150%);
}
}

@-webkit-keyframes marquee {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-150%);
}
}

@keyframes marquee {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-150%);
-webkit-transform: translateX(-150%);
transform: translateX(-150%);
}
}
}
@media only screen and (max-width: 600px) {
#shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
height: 260px;
}
.announcement-bar__message {
-moz-animation: marquee 2s linear infinite;
-webkit-animation: marquee 2s linear infinite;
animation: marquee 55s linear infinite;
}

@media only screen and (max-width: 500px) {
#shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
height: 240px;
}
}

I would like to make it continuous, though so it doesn't have a blank space while it loops back round. Am I doing something wrong in the CSS?

Thank you!

Jackie