如何使文本从左侧滑动（隐藏到可见），然后停在中间，然后一直滑动到右侧并滑出页面并重复？

Question

I am want this announcement to be animated, with the text sliding in from the left, pausing in the middle and sliding out to the right and repeat.我希望此公告具有动画效果，文本从左侧滑入，在中间暂停并向右滑出并重复。

enter image description here在此处输入图像描述

<div class="announcement-bar>
<p class="announcement-animation>Free two day Shipping</p>
</div>

Here is the css animation code I figured out.这是我想出的 css animation 代码。 But the issue is that the text is not centering properly.但问题是文本没有正确居中。 It takes the starting of the element(p tag), the letter F, to the center of page and not the center of element.它将元素（p 标签）的开头字母 F 带到页面的中心，而不是元素的中心。 What am I doing wrong?我究竟做错了什么？

.announcement-bar p {
  width: max-content;
  position: relative;
    left: -50px;
    animation: move 8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes move
{ 
    37.5% {
        left: calc(50% - 25px); opacity: 1; -webkit-filter: opacity(1);
    }
    75% { left: calc(50% - 25px); opacity: 1;}
    85% { left: 80%; opacity: 0;}
    100% {opacity: 0;}
}

Not centered不居中

Answer 1

My example (code below) is based on a 1920px width viewport.我的示例（下面的代码）基于 1920 像素宽度的视口。 Which means that if you're gonna use this animation for mobile devices it won't work properly.这意味着如果您要将这个 animation 用于移动设备，它将无法正常工作。 If you want to change the speed of the animation you need to alter the “animation: announcement..s linear”.如果你想改变 animation 的速度，你需要改变“animation:announcement..s linear”。 If you want to change the place the animation stops midway (you'll need to change this with the media query if you want to make this kind of animation for Mobile viewports), alter the “40% {margin-left: …px;} 60%{margin-left: …px;}”.如果您想更改 animation 中途停止的位置（如果您想为移动视口制作这种 animation，则需要使用媒体查询进行更改），更改“40% {margin-left: …px; } 60%{margin-left: …px;}”。

body {
    margin: 0;
    padding: 0;
}

.announcement-bar {
    width: 100%;

}

.announcement-animation {
    margin-left: -200px;
    animation: announcement 12s linear;
    animation-fill-mode:none;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
}

@keyframes announcement{
    0% {
        margin-left: 0px;
    }
    40% {
        margin-left: 800px;
    }
    60%{
        margin-left: 800px;
    }
    100% {
        margin-left: 2000px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="announcement-bar">
    <p class="announcement-animation">Free two day Shipping</p>
    </div>
</body>
</html>

如何使文本从左侧滑动（隐藏到可见），然后停在中间，然后一直滑动到右侧并滑出页面并重复？

问题描述

1 个解决方案

解决方案1
0 2022-08-18 16:17:44

如何使文本从左侧滑动（隐藏到可见），然后停在中间，然后一直滑动到右侧并滑出页面并重复？

问题描述

1 个解决方案

解决方案1 0 2022-08-18 16:17:44

解决方案1
0 2022-08-18 16:17:44