html - 子元素拒绝继承 Firefox 中的背景动画
问题描述
我在我的网站上制作了一条六边形形状的带子,它可以缓慢地为背景颜色设置动画以产生“闪烁”效果。您可以在https://taketwicedailey.com/上看到它的实际效果。我使用网上找到的教程制作了六边形元素。它涉及制作一个矩形元素,然后将 ::before 和 ::after 选项定位为矩形元素的顶部和底部的菱形(如果有更好的方法,请告诉我,我是 web 构建的新手)。
然后我想做的是让一组六边形形状的永久循环动画改变背景颜色。然后我想根据第 n 个类型的选择器设置这个动画在不同的时间为不同的元素开始。我使用谷歌浏览器开发了所有这些,它运行良好,没有问题,你可以验证自己。
当您使用 Firefox 时,问题就来了。似乎动画不想被 ::before 和 ::after 选项继承,这会产生蝴蝶结的效果。这似乎发生在 Firefox 的最近更新中,因为这在不久前还不是问题。从在 ::before、::after 定义中定义动画到使用 !important 标志,我已经尝试了所有方法,但是这个明显错误背后的机制远远超出了我的理解。
我在下面包含了我的 CSS,在此先感谢您的帮助。
.hex-group {
position: absolute;
top: 470px;
left: 60%;
width: 250px;
margin: 0px;
font-size: 0;
text-align: center;
z-index: -5;
overflow: visible;
}
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -7;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: inherit !important;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n) {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1){
animation-delay: -5s;
}
.hex:nth-of-type(4n+2){
animation-delay: -10s;
}
@keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
解决方案
我认为这是一个合法的 Firefox 错误,但现在我找到了以下解决方法。您可以像这样将动画“过度指定”到 ::before 和 ::after 元素
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -5;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n),
.hex:nth-of-type(4n):before,
.hex:nth-of-type(4n):after {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1),
.hex:nth-of-type(4n+1):before,
.hex:nth-of-type(4n+1):after {
animation-delay: -5s;
}
.hex:nth-of-type(4n+2),
.hex:nth-of-type(4n+2):before,
.hex:nth-of-type(4n+2):after {
animation-delay: -10s;
}
@keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
推荐阅读
- macos - Mac上的Intellij IDEA随机弹出窗口中断编码
- python - 无法完成 mRNA 功能
- c# - 如何在打开新页面的 razor pages .net core 3.1 项目中的剑道网格中添加自定义按钮
- java - 是否有可能与中间生产者建立 Java 流?
- mysql - 列出至少包括三个不同零件(不是数量)的订单的订单号。也显示订购的零件数量?
- visual-studio - 如何在 GitHub 上使用 Visual Studio 推送 Unity 项目?
- java - 工具栏在过渡到新片段时消失
- php - 如何在 SQL 中输出下一个日期?
- html - 引导下拉列表未扩展
- java - 有没有一种干净的方法来更改 Nimbus Jose JWT 中的默认 JWKSetCache TTL?