CSS动画-在不转换的情况下更改属性？

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

下面是一个例子：

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

因此，在本例中，属性将从0逐渐过渡到100，然后返回到0。但是，我需要去掉这个转换，所以属性保持在0，当它达到50%时，它就变为100。如果我说left:0，它不起作用；49%，因为仍然存在过渡

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

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

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

---

有什么想法吗？

我使用

-webkit动画填充模式：向前属性，该属性将100%停止动画，而不将元素返回到原始状态。我编造了一个实用的例子，你可以看看

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

它在过渡过程中从0跳到100（49%–50%，正如你建议的：P），并停留在100%点。如上所述，使用
-webkit动画填充模式：向前元素将保持100%不变，而不会返回其原始状态

我不知道它是否适用于您的场景，但我相信如果不适用，将有一个简单的解决方案。
我搜索了与您实际相同的内容。
您可以在动画中设置一个很棒的参数，称为动画计时函数，允许您完美地对动画进行数学设置：使用bezier曲线值，或者，如果您像我一样不是很好的数学家，则可以使用参数调用“step（）”。
例如，在非速记写作中：

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

默认情况下，此参数的值设置为0，表示没有步骤。
您可以在此处阅读有关此有趣功能的更多信息：

这里是动画的简写符号：

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

对我来说，它至少在Firefox23.0.1上运行良好

即使我认为你从一年前就解决了这个问题，也许可以帮助一些像我这样的人：）
你可以在你的动画配置中使用
步骤开始
或
步骤结束
（），这样曲线将像一个“步骤”（而不是曲线）那样在帧之间没有视觉过渡，因此动画将只是“跳跃”在帧之间

CSS示例：
上面的示例将调用
move
关键帧（我之所以没有编写关键帧，是因为它不相关），并将使用前面描述的“step”参数在帧上无休止地循环，无需转换曲线


@关键帧foo{
0%{左边距：0}
50%{左边距：50%}
}
div{
宽度：50px；
高度：50px；
背景：黑色；
边界半径：50%；
动画：1s foo无限；
}
输入：选中+div{
动画计时功能：步进结束；
}

禁用动画转换
您可以使用以下功能：

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

当我在谷歌上搜索动画填充模式时，我找到了解决问题的正确方法。这是动画计时功能，更具体地说是“步长”值。它从一个状态跳到另一个状态，没有任何转换。如果你愿意，做一个新的回答，这样我就可以接受：）干杯！谢谢你，尼古拉！但是你给出了正确的答案，不是我！无论如何，我很感激你的提议：我很高兴你解决了你的问题！以下是你的答案：
animation:1s move infinite step-end;

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