当前位置: 首页 > 面试题库 >

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

任飞鸣
2023-03-14
问题内容

如果没有Javascript,我想制作一个简单的循环CSS动画类,以使文本无限地淡入和淡出。我对CSS动画了解不多,所以我还没有弄清楚,但是这是我的发展目标:

@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

问题答案:

正如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>


 类似资料:
  • 本文向大家介绍JavaScript淡入淡出渐变简单实例,包括了JavaScript淡入淡出渐变简单实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript淡入淡出渐变的实现方法。分享给大家供大家参考。具体如下: 这里介绍JavaScript淡入淡出的文字渐变例子,用js来控制div标签元素实现渐变显示,渐变隐藏,只要在那个标签里的内容,都可以淡入淡出,代码简单,便于修改完善

  • 主要内容:实例,jQuery Fading 方法,jQuery fadeIn() 方法,实例,jQuery fadeOut() 方法,实例,jQuery fadeToggle() 方法,实例,jQuery fadeTo() 方法,实例通过 jQuery,您可以实现元素的淡入淡出效果。 因为时间是宝贵的,我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法。 jQuery fadeOut() 演示 jQ

  • 动画outputFade Out UP BigFade InFade In LeftFade In LeftFade Out Left BigFade In RightFade Out Right Big淡出Fade Out UP Big淡出淡出Fade Out LeftFade Out Left BigFade Out RightFade Out Right Big淡出Fade Out UP B

  • 问题内容: 我想让HTML div标签淡入淡出。 我有一些淡出的代码,但是当我淡入时,div的不透明度保持在0.1且不会增加。 我在做什么错,淡入淡出元素的最佳方法是什么? 问题答案: 好,我已经解决了 应该代替 与相同 代替 因为不透明度值存储为字符串,而不是浮点数。我仍然不确定为什么添加成功了。

  • 本文向大家介绍js实现图片加载淡入淡出效果,包括了js实现图片加载淡入淡出效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码,供大家参考,具体内容如下 HTML代码 首先是图片标记的写法: 需要将图片的地址放到 data-src 属性里,而src值填写默认的一张图片。 CSS代码 所有具有data-src属性的图片,我们将其初始显示状态为不可见

  • 本文向大家介绍vue路由切换之淡入淡出的简单实现,包括了vue路由切换之淡入淡出的简单实现的使用技巧和注意事项,需要的朋友参考一下 路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计 想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签