Multiple Linear Animations On Same Line - Issue where second animation is not starting at the beginning

user_19222783 0
Viewed 26

I'm working on a project where I want to have two animation with one following the other after a delay. I've gotten the two animation on the same line with one following after a delay, but I can't seem to get it work perfectly. The issue that I am having is that the first animation is starting after 0%/0vw, so it's show the animation start instead of it coming from off the page. I would really appreciate any help or advice on how to get this to work. Thank you!

.announcement {
    justify-content: right;
    align-items: center;
    display: flex;
}

.announce {
    font-size: 1.3rem;
    position: relative;
   /* animation: mymove 20s infinite;*/
   /* animation-timing-function: linear;*/
    animation: linear 15s mymove infinite;
}

.announce2 {
    font-size: 1.3rem;
    position: relative;
  /*  animation: mymove 20s infinite;*/
   /* animation-timing-function: linear;*/
    animation: linear 15s mymove2 infinite;
    animation-delay: 5s;
}

@keyframes mymove {
    from {right: 0vw;}
    50% {right: 50vw !important;} /* ignored */
    to {right: 100vw;}
  }

  @keyframes mymove2 {
    from {right: 0vw;}
    50% {right: 50vw !important;} /* ignored */
    to {right: 100vw;}
  }
 <div class="announcement">
 <div class="announce">
        Hello
  </div> 
  <div class="announce2">
       Hello
  </div>
</div>

css
1 Answers

To get the announcement off the screen to the right it needs to not only be positioned right: 0 but also to move further to the right by its own width. This can be achieved with a translation of 100%.

As an example, this snippet gives both announcements the same animation and other settings - apart from giving announement2 the animation delay.

The parent element has overflow hidden, and the body is given margin 0 to ensure that the announcements go fully from the right to the left.

body {
  margin: 0;
}

.announcement {
  justify-content: right;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.announce,
.announce2 {
  font-size: 1.3rem;
  position: relative;
  animation: linear 15s mymove infinite;
  right: 0;
  transform: translateX(100%);
}

.announce2 {
  animation-delay: 5s;
}

@keyframes mymove {
  to {
    right: 100vw;
    transform: translateX(0%);
  }
}
<div class="announcement">
  <div class="announce">
    Hello
  </div>
  <div class="announce2">
    Hello
  </div>
</div>

Note: if what you are wanting is an evenly spaced continuous flow then you might like to search for 'marquee' on StackOverflow - not the HTML tag which is deprecated but continuous rotating banner.

user_108674540
Related