我有一个案件,我需要一个元素出现一秒钟,然后消失,我不能使用
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; }
}
在这里我想显示一段时间的元素.不,使用不透明度不是一个选择,因为元素仍然存在,并且仍然可以点击,我需要访问下面的元素.不幸的是,“显示”属性似乎不接受动画.如果有人能想到一个解决方案如何显示和隐藏一个动画元素(没有转换！)我将非常感激.
有任何想法吗？
解决方法
我实际上搜索了同样的事情.
您可以在动画中设置一个伟大的参数,称为动画定时功能,允许您设置完美和数学的动画：使用贝塞尔曲线值,或者像我一样,你不是那么好的数学家,一个参数调用“step )”.
举个例子,没有速写：
您可以在动画中设置一个伟大的参数,称为动画定时功能,允许您设置完美和数学的动画：使用贝塞尔曲线值,或者像我一样,你不是那么好的数学家,一个参数调用“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上它工作得很好.
即使我认为你一年来解决了这个问题,也许可以帮助一些像我这样的人:)
