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
}
对我来说,至少在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屋!