animation-delay 和 透明度opeacity一起使用

实现:按钮在其他部分显示完之后再显示。(这里用到的是 动画开始之前的延迟animation-delay 和 透明度opeacity)

1-1

遇到的问题:当 动画开始之前的延迟(animation-delay)时,需要让按钮处于不显示状态,但是如果开始把按钮的CSS样式设置opeacity=0,当动画结束之后,按钮就又消失了。

解决办法:先设置opeacity=0,然后通过定时器动态改变透明度为1。


1-2


1-3

这样就实现了opeacity的延迟显示。

还有额外的一点,在用animation的时候,如果animation-delay要与animation分开写,一定要写在animation之后才会起作用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。