CSS动画 - 更改属性没有转换？ [英] CSS Animations - change a property without a transition?

问题描述

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

下面是一个例子：

  @  -  webkit-keyframes slide-one-pager {
 0％{left：0; } 
 50％{left：100px; } 
 100％{left：0; } 
} 
  

所以在这个例子中，属性将从0逐渐过渡到100，但是，我需要摆脱这种转变，所以属性保持在0，并达到100，一旦它达到50％。它不工作，如果我说左：0;因为还有一个过渡。

另一个例子，稍微不同于我的原始问题，但如果我找到一个解决方案，它会做好：

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

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

任何想法？

解决方案

我搜索了和你实际上一样的东西。
您可以在动画中设置一个非常好的参数，称为 animation-timing-function ，允许您完全设置动画的数学运算：使用贝塞尔曲线值，或者，不是那么好的数学家，一个参数调用step（）。
例如，无简写：

  .hiding {
 animation-name：slide-单寻呼机
 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。 p>

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

I have a case where I need an element to appear for a second and then disappear, and I must not use javascript for it, so I'm trying to make it work with CSS.

Here's an example:

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

So in this example the property will gradually transition from 0 to 100 and back to 0. However, I need to get rid of that transition, so the property stays at 0 and gets to 100 as soon as it hits 50%. It doesn't work if I say left: 0; at 49%, because there is still a transition.

Another example, slightly more different than my original question, but if I find a solution for it it will do as well:

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

Here I want to show an element for a period of time. No, using opacity is not an option, because the element is still there and is still clickable, and I need access to elements below. Unfortunately the "display" property doesn't seem to accept animating. If anyone can think of a solution how to show and hide an element with an animation (without transition!) I will be extremely grateful.

Any ideas?

解决方案

I searched the same thing as you actually. You can set a greatful parameters in animation, called animation-timing-function allowing you to set perfectly and mathematicaly the animation : With bezier curve values or, if, like me, you're not that good mathematician, a parameter call "step()". For an example, in none shorthand writing :

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

By default, the value of this parameter is set to 0, meaning no steps. You can read more about this interesting feature here : https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

And here a shorthand notation for your animation:

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

For me, it works fine at least on firefox 23.0.1.

Even if I think you solved the problem since one year, maybe could help some people like me here :)

这篇关于CSS动画 - 更改属性没有转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！