Question

我有一个案例，我需要一个元素出现一秒然后消失，我不能使用javascript，所以我试图让它与CSS一起工作。

以下是一个例子：

@-webkit-keyframes slide-one-pager {
    0% { left: 0; }
    50% { left: 100px; }
    100% { left: 0; }
}

所以在这个例子中，属性将逐渐从0过渡到100并返回到0.但是，我需要摆脱那个过渡，因此属性保持为0并且一达到50％就达到100。如果我说左：0，它不起作用;为49％，因为仍有转型。

另一个例子，与我原来的问题略有不同，但如果我找到一个解决方案，它也可以做到：

@-webkit-keyframes slide-one-pager {
    0% { display: none; }
    50% { display: block; }
        75% { display: block; }
    100% { display: none; }
}

这里我想展示一段时间的元素。不，使用不透明度不是一个选项，因为元素仍然存在且仍然可以点击，我需要访问下面的元素。不幸的是，“显示”属性似乎不接受动画。如果有人能想出如何用动画显示和隐藏元素的解决方案（没有过渡！）我将非常感激。

有什么想法吗？

Answer 1

您可以在动画配置中使用step-start或step-end（graphs），这样曲线就会像“步骤”（不弯曲）一样，因此不会有视觉过渡帧，因此动画只会在帧之间“跳跃”。

CSS示例：

animation:1s move infinite step-end;

上面的例子将调用move关键帧（我没有写，因为它不相关），并且将使用之前描述的“step”参数无限循环框架，没有转换曲线。

<强> DEMO

Answer 2

我实际搜索了同样的东西。你可以在动画中设置一个很棒的参数，叫做动画 - 计时 - 功能，你可以完美地设置动画：使用bezier曲线值，或者，如果像我一样，你就不是那么好的数学家，参数调用“step（）”。举个例子，没有简写：

.hiding {
      animation-name:slide-one-pager;
      animation-duration:2s;
      animation-timing-function:steps(1);
}

默认情况下，此参数的值设置为0，表示无步骤。您可以在此处详细了解此有趣的功能：https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

这是动画的简写表示法：

.hiding {
      animation:slide-one-pager 2s steps(1);
}

对我来说，它至少在firefox 23.0.1上运行良好。

即使我认为你解决了一年以上的问题，也许可以帮助像我这样的人：）

Answer 3

我使用-webkit-animation-fill-mode: forwards;属性创建它，它将动画停止在100％而不将元素返回到原始状态。我用一个工作示例做了一个小提琴，你可以查看here。

虽然在小提琴中你可以找到一个更好的例子，但我基本上做了这个（假设绝对定位的元素）：

.hiding {
    -webkit-animation: slide-one-pager 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes slide-one-pager {
    0%   { left: 0; }
    49%  { left: 0; }
    50%  { left: -100px; }
    100% { left: -100px; }
}

它在转换过程中从0跳到-100（49％ - > 50％，如你所说'：P），并保持在100％。如上所述，对于-webkit-animation-fill-mode: forwards;，元素将保持100％而不返回其原始状态。

我不知道它是否会在你的场景中发挥作用，但我相信如果没有，它会有一个简单的解决方案。

Answer 4

您可以使用：

animation: typing 1s cubic-bezier(1,-1, 0, 2) infinite;

CSS动画 - 在没有过渡的情况下更改属性？

4 个答案:

CSS示例：