Animate text to make it scroll-CodePudding

At the top of my page, I want to have some text scroll from left to right, as an announcement. I've heard about CSS animations before, but I don't know how to make one. So far, this is what I have.

p {
  position: relative;
  animation-name: example;
  animation-duration: 13s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {left:-200px; top:0px;}
  50%  {left:700px; top:0px;}
}

<p>This is an announcement</p>

I am wondering if there is an easier way to make the scrolling animation. I don't know JavaScript, but is there a way to make this animation in JavaScript or just in CSS?

CodePudding user response：

So currently, your animation kind of restarts every 13 seconds and pauses and then starts over again. In your animation, the text movement is not consistent, it starts to move fast and when it ends, it gets slower.

A solution is to use the <marquee> tag. This tag is especially made for scrolling text! For example, this code will automatically do whatever your code does, but better and less lines of code:

<!DOCTYPE html>
<html>
<body>

<marquee direction="right" >This is a paragraph.</marquee>

</body>
</html>

There are also a lot of attributes that you can change, including the direction, speed, height, loop, width, etc. You can change these attributes to your liking to make the scrolling text better.

CodePudding user response：

You can use translateX with the transform property.

p {
  animation: example linear 5s infinite;
}

@keyframes example {
  from {
    transform: translateX(-40%);
  }
  to { 
    transform: translateX(100%);
  }
}

<p>This is an announcement</p>