您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站
问答- 问题:简单的CSS动画循环–淡入和淡出“加载”文本

简单的CSS动画循环–淡入和淡出“加载”文本

简单的CSS动画循环–淡入和淡出“加载”文本

正如King King所说，您必须添加浏览器特定的前缀。这应该涵盖大多数浏览器：

@keyframes flickerAnimation {

  0%   { opacity:1; }

  50%  { opacity:0; }

  100% { opacity:1; }

}

@-o-keyframes flickerAnimation{

  0%   { opacity:1; }

  50%  { opacity:0; }

  100% { opacity:1; }

}

@-moz-keyframes flickerAnimation{

  0%   { opacity:1; }

  50%  { opacity:0; }

  100% { opacity:1; }

}

@-webkit-keyframes flickerAnimation{

  0%   { opacity:1; }

  50%  { opacity:0; }

  100% { opacity:1; }

}

.animate-flicker {

   -webkit-animation: flickerAnimation 1s infinite;

   -moz-animation: flickerAnimation 1s infinite;

   -o-animation: flickerAnimation 1s infinite;

    animation: flickerAnimation 1s infinite;

}


<div class="animate-flicker">Loading...</div>
CSS 2022/1/1 18:21:32 有300人围观

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进，让解决方法与时俱进

请先登录

推荐问题

联系我

联系我

602392714

清零编程清零编程群

置顶