如何使文本從左側滑動（隱藏到可見），然后停在中間，然后一直滑動到右側並滑出頁面並重復？

Question

我希望此公告具有動畫效果，文本從左側滑入，在中間暫停並向右滑出並重復。

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

這是我想出的 css animation 代碼。 但問題是文本沒有正確居中。 它將元素（p 標簽）的開頭字母 F 帶到頁面的中心，而不是元素的中心。 我究竟做錯了什么？

.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;}
}

不居中

Answer 1

我的示例（下面的代碼）基於 1920 像素寬度的視口。 這意味着如果您要將這個 animation 用於移動設備，它將無法正常工作。 如果你想改變 animation 的速度，你需要改變“animation:announcement..s linear”。 如果您想更改 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