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 的背景图像 的相关文章

  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • CSS:仅显示字符串的前两个字母

    是否可以使用纯 CSS 仅显示字符串的前两个字母 到目前为止我已经尝试过 没有成功 first letter 仅针对第一个字母 无论如何对我不起作用 nth of everything 需要额外的 javascript 文本溢出 省略号 正
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • html 选择列表 - 通过传入变量获取文本值?

    我有一个显示列表语言的选择列表
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad

随机推荐

  • 添加数据时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