如何在一个 CSS animation 中间的过渡点暂停一下？

Question

我制作了一种 header，从两端开始有一个动画信息横幅（3 行）。 （例如：对于第一行和第三行，从左到右，对于第二行，从右到左）。 我想要的是在 3 个频段都对齐（在中心）时休息几秒钟，然后继续 animation。

我更喜欢不使用 javascript 的解决方案，但不幸的是我认为这似乎不可能？

问题：第一个和第三个横幅总是在第二个之前开始出现，因此当它们对齐时，它们永远不会位于中心。

 <.DOCTYPE html> <HTML> <head> <title> VIDEO LIBRARY </title> <meta charset="utf-8"/> <style type="text/css">:bandeau { height; 120px: width; 100%: padding-top; 5px: border-radius; 25px: background, rgb(26,133;230): } @keyframes defilement { from { left; 0: } to { left; 1000px. } }:defil { margin; 10px: position; relative: height; 20px: background-color; black: border; 1px solid black: overflow; hidden: text-align; center. }:defil div { position; absolute: top; 0: left; 0: width; 250px: height; 20px: background-color; blue: opacity; 1. }:ex1 div { animation; defilement 20s linear infinite. }:ex2 div { top;0: right;0: background-color; white: animation; defilement 20s linear infinite reverse. }:ex3 div { background-color; red: animation; defilement 20s linear infinite ; } </style> </head> <body> <div class="bandeau" > <div class="defil ex1"> <div>MANAGEMENT</div> </div> <div class="defil ex2"> <div>OF MY</div> </div> <div class="defil ex3"> <div>VIDEO LIBRARY</div> </div> </div> </body> </HTML>

Answer 1

您可以使用百分比设置步长，而不是在关键帧中使用from和to 。

在下面的代码中，从 animation 的 0% 到 45%，animation 从 0 移动到 500px。 然后从 45 - 55% 它保持在 500px（即暂停）。 然后从 55 - 100% 它从 500 - 1000px 移动：

@keyframes defilement {
    0% {left: 0;}
    45% {left: 500px;}
    55% {left: 500px;}
    100% {left: 1000px;}
}

响应式解决方案：块将停在任何尺寸屏幕的中央。

如果您没有固定宽度并且想要一种更灵敏的方式来计算中点，您可以使用百分比：从 0% 开始，100% 结束，然后 50% 用于中心。

但是，如果您 position 在正中心的街区左侧，它会有点太靠右了。 块左侧的正确 position 实际上是50% - 125px (half of the width of the div) 。 我们实际上可以使用 CSS calc function来做到这一点！

同样为了让所有块同时出现，我们需要将起点更改为-250px ，这样 3 个块都从屏幕开始，然后一起滑入。

@keyframes defilement {
    0%   { left: -250px;}
    45%  { left: calc(50% - 125px); }
    55%  { left: calc(50% - 125px); }
    100% { left: 100%;}
}

工作示例：

 .bandeau { height: 120px; width: 100%; padding-top: 5px; border-radius: 25px; background: rgb(26, 133, 230); } @keyframes defilement { 0% { left: -250px; } 45% { left: calc(50% - 125px); } 55% { left: calc(50% - 125px); } 100% { left: 100%; } }.defil { margin: 10px; position: relative; height: 20px; background-color: black; border: 1px solid black; overflow: hidden; text-align: center; }.defil div { position: absolute; top: 0; width: 250px; height: 20px; background-color: blue; opacity: 1; }.ex1 div { animation: defilement 20s linear infinite; }.ex2 div { top: 0; right: 0; background-color: white; animation: defilement 20s linear infinite reverse; }.ex3 div { background-color: red; animation: defilement 20s linear infinite; }

 <div class="bandeau"> <div class="defil ex1"> <div>MANAGEMENT</div> </div> <div class="defil ex2"> <div>OF MY</div> </div> <div class="defil ex3"> <div>VIDEO LIBRARY</div> </div> </div>

有关关键帧的更多信息，请查看Mozilla MDN 文档中的 CSS3 关键帧

如何在一个 CSS animation 中间的过渡点暂停一下？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-08-29 11:38:24

如何在一个 CSS animation 中间的过渡点暂停一下？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-08-29 11:38:24

解决方案1
1 已采纳 2020-08-29 11:38:24