Question 205112 in Html Question posted in
Some basic documentation can be found here.

Html – Want to show the text from right when it disappears

At the end of the animation the text is completely disappearing I want to show it from right the text which is disappearing I don’t want to disappear the text completely

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 100%;
  border: 1px solid orange;
}

.wrapper p {
  position: absolute;
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
<div class="wrapper">
    <p>Hey, how you're doing? Sorry you can't get through.</p>
</div>
Tags:

2

Answers


  1. 0 
    .wrapper {
    position: relative;
    overflow: hidden;
    height: 25px;
}

.wrapper div {
    display: flex;
    width: 200%;
    position: absolute;
    overflow: hidden;
    animation: marquee 8s linear infinite;
}

.wrapper span {
    width: 50%;
}

@keyframes marquee {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}
        <div class="wrapper">
        <div>
            <span>Hey, how you're doing? Sorry you can't get through.</span>
            <span>Hey, how you're doing? Sorry you can't get through.</span>
        </div>
    </div>

    Hope that work for you and got your answer 🙂

    Login or Signup to reply.
  2. 0 
    @keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

    This animation means to move the div from its original position + 100% of its width, to its original position -100% of its width (which is to the left of its original position).

    Using transform: translateX(0%) should move it to its original position.

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

    You would have to change animation parameters in .wrapper p so that the animation doesn’t keep repeating, and since the distance covered is now shorter, the speed would be slower than intended.

    From animation: marquee 5s linear infinite; to animation: marquee 2s linear;

    .wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 100%;
  border: 1px solid orange;
}

.wrapper p {
  position: absolute;
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 2s linear;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}
    <div class="wrapper">
    <p>Hey, how you're doing? Sorry you can't get through.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search