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

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(图形),这样曲线就像一个"步骤"(不是曲线),因此帧之间不会有视觉过渡,因此动画只会在帧之间"跳跃".

CSS示例:

animation:1s move infinite step-end;

上面的例子将调用move关键帧(我没有写,因为它不相关),并将使用前面描述的"step"参数无限循环框架,没有转换曲线.

DEMO

Answer 2

我实际上搜索了同样的东西.您可以在动画中设置一个很棒的参数,称为动画计时功能,允许您完美地设置和动画数学:使用贝塞尔曲线值,或者,如果像我一样,你不是那么好的数学家,参数调用"步骤( )".举个例子,没有简写:

.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%，而不将元素返回到原始状态。我用一个工作示例编写了一个小提琴，您可以在这里查看。

\n\n

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

\n\n

.hiding {\n    -webkit-animation: slide-one-pager 2s;\n    -webkit-animation-fill-mode: forwards;\n}\n\n@-webkit-keyframes slide-one-pager {\n    0%   { left: 0; }\n    49%  { left: 0; }\n    50%  { left: -100px; }\n    100% { left: -100px; }\n}\xe2\x80\x8b\n

\n\n

它只是在过渡过程中从 0 跳到 -100（如您“建议”的 49% -> 50% :P），并保持在 100%。如前所述，-webkit-animation-fill-mode: forwards;元素将保持 100% 状态，而不会返回到其原始状态。

\n\n

我不知道它是否适用于您的场景，但我相信如果不适用，会有一个简单的解决方案。

\n