CSS3 动画中 Firefox 的背景图像

2023-12-08

我正在用 CSS 制作关键帧动画。由于支持 -webkit 语法,动画似乎在 Chrome 中运行得很好。

@-webkit-keyframes title_toggle 
{
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

我在 Firefox 中尝试了下面的代码,但它不起作用

@-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

请让我知道我会在 FF 工作。

这是CSS部分。

@-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

.title{
    width:40%;
    height: 30%;
    position: absolute;
    top: 10%;
    left: 5%;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    -webkit-animation-name: title_toggle;
    -webkit-animation-duration:5s;
    -webkit-animation-iteration-count:infinite;
    background-size: 100% 100%; 
     -moz-animation-name: title_toggle;
     -moz-animation-duration:5s;
     -moz-animation-iteration-count:infinite;
}

这是 HTML

<div class="title"></div>

如果您询问不同图像之间缺乏交叉淡入淡出插值,这是规范的一个非常新的补充,但尚未得到广泛支持。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS3 动画中 Firefox 的背景图像 的相关文章

  • Anythingslider 触摸滑动功能可阻止 IOS 和平板设备上链接的正常点击

    我正在将任何滑块 jquery 插件与触摸事件一起使用 它似乎在所有设备上都能按预期工作 允许用户通过触摸平板电脑和 iOS 设备以及在桌面上使用鼠标来 滑动 slider anythingSlider Callback when the
  • 将事件绑定到动态添加的元素

    我正在尝试使用 jquery 将函数绑定到新添加的元素 我已经尝试了很多在线示例 但不知怎的 没有任何效果对我有用 我创建了一个带有 id 和一个按钮的表单 在提交 ajax 时从另一个页面加载元素并在当前网站上插入 html 一切似乎都工
  • 如何为文本添加发光效果?

    我还没有真正找到任何好的简单的动画发光效果教程 如何为文本设置发光动画 如果您只想使用 CSS3 您甚至不必使用任何 jQuery JavaScript 只需在 CSS 中执行以下操作 confirm selection webkit tr
  • Android 是否可以使用并发插值器?

    我有一组两个动画 两个动画使用过冲插值器一起运行
  • 提交表单而不重定向

    我想提交表单而不重定向页面 表单已提交给第三方 因此我无法在 php ini 中进行更改 我想做的是 无需访问第三方页面即可提交 成功提交后显示警报 目前我正在使用隐藏的 iframe 和表单目标来隐藏 iframe 但我不满意 有没有更好
  • SVG - 可以在一侧添加笔画破折号渐变或透明形式

    我创建了一个 SVG 动画 在其中允许中风虚线阵列移动 我是否可以在中风破折号数组的尾部添加渐变并保持一侧透明 如示例中所示 svg main width 700px margin 30px auto position relative s
  • 避免在 Flutter Web 插件包之外使用纯 Web 库

    我正在构建一个 Flutter 应用程序 并尝试在网络上运行 其中一部分包含一些特定于网络的代码 import dart html as html import package flutter foundation dart class D
  • window.alert() 之后无法编辑输入文本字段

    我有这个 Electron 应用程序 使用 NodeJS Bootstrap AngularJS 其中包含一些可以编辑的文本输入字段 我有一个触发 window alert 的按钮 触发后 文本输入字段将不再可编辑 单击应用程序的其他元素不
  • 在网络上使用多种颜色的背景

    抱歉 如果标题有点误导 我想做的是用真正的浅灰色覆盖索引页面的背景 除了显示我的内容的部分 div class col sm 1 div div class col sm 8 div div class col sm 3 div 我希望 c
  • 为什么 event.stopPropagation() 不会阻止

    SO 上也提出了与此类似的问题 但他们要么只关心解决其具体实现 要么没有明确提出这个问题 此外 所有答案都没有真正解决这个问题 给出以下示例 document querySelector span addEventListener clic
  • .onLoad 在渲染完成之前调用吗?

    我想在页面加载后调用一些 JS 这可能会涉及延迟 因此我希望首先加载页面 以便显示内容 但似乎调用了 onLoad 处理程序中的代码before渲染完成 是否有更好的事件可以使用 该事件在页面 完成 时触发 澄清一下 我想在页面呈现在屏幕上
  • 如何使用c#获取服务器端元素的innerhtml(内部有另一个服务器端控件)

    如何使用c 获取服务器端元素的innerhtml 内部有另一个服务器端控件 或者使用 Visual Studio 2010 设计电子邮件正文的最佳方法是什么 我有一些 C 代码用于发送电子邮件 支持 html 正文 所以我正在寻找一种逃避硬
  • 为什么在 CSS3 中启用硬件加速会降低性能?

    我在 css3 实验中将 10 000 个小 div 元素从浏览器视口的顶部移动到底部 对于此测试 我使用两种不同的方法 使用 GPU 加速translate3D x y z or translateZ 0 无需 GPU 加速 只需调整to
  • 在 jQuery 中,如果我有一个开始类和结束类,我如何用 div 包装多个元素

    好的 这里有一些 html 我有一些开始和结束课程 但为此我只添加了每门课程 1 门 div span nbsp span div div span nbsp span div div class start lt start span n
  • 如何更改 mat-slide-toggle 的颜色属性/覆盖组件的 CSS?

    有什么办法可以改变颜色属性mat slide toggleAngular Material 组件库中的组件 如何覆盖它的样式 或者有人可以建议我任何其他用于 Angular 5 应用程序的滑动开关 例如材料滑动开关 您可以更改原色mat s
  • 如何创建具有动态数量的网格列的 TailwindCSS 网格?

    我正在使用 Vue3 和 TailwindCSS 并希望创建一个具有动态的网格grid cols n 班级 我知道 TailwindCSS 默认情况下最多支持 12 列 但我无法自定义主题 因为列的数量完全是动态的 给出以下纯 HTML J
  • html div位置和显示

    Hi 我正在尝试设计一个网站 使用 5 个不同的 div 如上所示 A 是标题 背景图像 重复 x B 是导航栏 1 div 内的图像 应具有 100 高度 C 是内容面板 div 应该是页面滚动期间唯一移动的部分 D 是页脚 div 应始
  • Web 动画 API - 不同的动画持续时间?

    我正在尝试 Web Animations API 该 API 目前仅适用于 Webkit 浏览器 可以想象 文档有点稀疏 这是我在上面找到的一篇博客文章 http updates html5rocks com 2014 05 Web Ani
  • 具有多种类型属性的 HTML5 输入

    我们的表单软件输出所有带有 type text 的元素 但我宁愿利用 HTML5 中的新类型 例如 电子邮件 数字 等 我可以在最后添加这些 但最终会得到多个类型属性 例如
  • iframe 内 Web 元素的 QuerySelector

    编辑 新标题 我正在寻找的是 iframe 内元素的 document querySelector 我已经用谷歌搜索了很多答案 最后我被难住了 我正在尝试在 iframe 内查询 我正在构建要在 Selenium 中使用的字符串选择器 通常

随机推荐

  • 添加数据时ng-repeat不更新列表

    我的问题是 ng repeat 不会自动更新数据 当我在代码中按添加引脚时 该元素会正确添加到数据库中 如果我重新加载页面 数据会正确显示 但不会像角度那样显示 据记录 更新和删除工作正常 提前致谢 这是我的 app js 代码 var a
  • ASP.NET MVC3 - 使用 Javascript 的错误

    我正在尝试使用 Ajax BeginForm 从我的控制器发布 Json 结果 我正在使用 MVC3 当 Json 结果被调用时 它应该被发送到 javascript 函数并使用提取对象 var myObject content get r
  • 显示优惠券说明 woocommerce

    我试图在购物车页面应用优惠券 10 后显示优惠券描述 要显示总计 我正在使用 woocommerce gt cart gt cart contents total 如何显示优惠券说明 由于你没有提到你想要在哪里有优惠券说明 我之前已经打印了
  • 聚合数据帧列表并存储所有结果

    我有 9 个数据框的列表 每个数据框大约有 100 行和 5 6 列 我想根据所有数据帧中另一个列中指定的组来聚合列中的值 并将所有结果存储在单独的数据框中 为了阐明这一点 请考虑一个列表 1 Date Group Age Nov A 13
  • Hibernate 不会完全刷新实体子级

    我使用 Hibernate 5 1 0 Final 我的GenericDAO类主要方法 public T save T entity entityManager getTransaction begin entityManager pers
  • 如何删除 Symfony 2.7 中的弃用警告?

    Symfony 在日志和控制台中输出了可怕的 自 2 6 版本以来已弃用 并将在 3 0 中删除 错误 我遵循了我发现的所有声称可以解决该问题的指南 包括升级 sensio distribution bundle 并将 E USER DEP
  • 是否可以重新加载相同的 FXML/Controller 实例?

    Goal Implement a standard Settings GUI window Categories in a ListView on the left and the corresponding options in a Pa
  • OpenGL 打包正常

    我试图理解使用之间的区别GL INT 2 10 10 10 REV对于我的数据的正常情况 V S GLbyte 目前我正在将法线加载到glm vec4我这样包装它 int32 t floatToSignedNormalizedByte fl
  • 如何更改视频播放速度

    我想知道是否可以在 iPhone 应用程序中更改视频播放速度 我们希望用户对着麦克风大喊以加快播放速度并结束 您必须使用 setCurrent PlaybackRate
  • 在 Facebook 或 Twitter 授权后存储和检索用户收到的令牌

    您好 我目前正在尝试编写一个 MVC5 应用程序 该应用程序能够在通过 facebook 或 twitter 授权后存储用户收到的令牌 我想将其存储在数据库中而不是 cookie 中 并在用户将来的任何 API 请求和登录尝试中使用它 这样
  • 如何找到可见MKMapView可见屏幕区域的半径?

    我想知道iPhone屏幕中可见区域的半径 因为我会缩小和放大可见区域会发生变化 所以我想知道该特定区域的半径 我该怎么做 它不是所需的半径 您需要使用mapView 中的region 参数 查一下苹果文档 里面说的很清楚了 完成本教程 它会
  • 如何限制 Android Google 自动完成 API 仅获取火车站

    尽管有很多关于如何将 API 限制为特定国家 地区的答案 但找不到任何有关将其限制为火车站的信息 请帮我解决这个问题 谢谢 我认为目前 API 不支持此功能 我可以在 Places API Web 服务中看到启用此功能的功能请求 https
  • 在 numpy 数组中查找相同的行和列

    我有一个 nxn 元素的布尔数组 我想检查是否有任何行与另一行相同 如果有任何相同的行 我想检查相应的列是否也相同 这是一个例子 A np array 0 1 0 0 0 1 0 0 0 1 0 1 0 1 0 0 0 1 1 0 1 0
  • 三元运算符比 Java 中的“if”条件更快吗?

    这个问题在这里已经有答案了 我很容易出现 如果条件综合症 这意味着我倾向于一直使用 if 条件 我很少使用三元运算符 例如 I like to do this int a if i 0 a 10 else a 5 When I could
  • 无法通过 Google Apps 脚本中的 YouTube 数据 API 从云端硬盘上传:空响应

    我正在尝试将文件列表从 Google 云端硬盘导入到 YouTube 元数据和文件的 URL 位于 Google 电子表格中 因此我使用 Google Apps 脚本编写了一些代码 该代码执行以下操作 获取选定的行 检索标题 描述 Goog
  • 使用 pyparsing 匹配非空行

    我正在尝试制作一个使用的小应用程序pyparsing从另一个程序生成的文件中提取数据 这些文件具有以下格式 SOME KEYWORD line 1 line 2 line 3 line 4 ANOTHER KEYWORD line a li
  • 如何在javascript中迭代链表

    有人分享了这种从数组创建链接列表的美丽而优雅的方法 function removeKFromList l k let list l reduceRight value next gt next value null console log
  • Microsoft Graph:当前经过身份验证的上下文对此请求无效

    我有一个使用 MSAL 和 v2 0 端点来登录用户并获取令牌的应用程序 我最近将其更改为 ADAL 和正常的 AAD 端点 也更改了应用程序 现在当我尝试使用 GraphService 时 出现以下错误 Current authentic
  • 重新缩放矢量 R

    假设我有一个整数向量 例如 gt x 1 1 1 1 4 4 13 13 14 我正在 R 中寻找一种有效的方法 将向量重新调整为整数 1 到元素的唯一数量的最大值 因此得到的向量将是 1 1 1 2 2 3 3 4 似乎是一个简单的问题
  • CSS3 动画中 Firefox 的背景图像

    我正在用 CSS 制作关键帧动画 由于支持 webkit 语法 动画似乎在 Chrome 中运行得很好 webkit keyframes title toggle from background image url images title