悬停动画在 Firefox 中不起作用，元素不采用关键帧属性答案

【问题标题】：Hover animation not working in firefox , element not taking keyframe properties悬停动画在 Firefox 中不起作用，元素不采用关键帧属性
【发布时间】：2016-06-09 12:49:27
【问题描述】：

我的 HTML 页面上有一个悬停动画，它是自定义的。现在 HTML 看起来像这样：

HTML：

<figure class="schedule-info-box">
    <a href="">
        <img src="images/gallery/schedule/1.jpg" alt="schedule image">
        <figcaption>
            <div class="caption-wrapper">
                <h4>Yin Yoga  Dessi</h4>
                <p>06:30 - 07:30</p>
            </div>
            <a href="" class="book-online">
                Cick Here For <br>
                Online Booking
            </a>
        </figcaption>
    </a>
</figure>

你可以看到FIDDLE HERE（小提琴不会重现问题。）

现在当我将鼠标悬停在框上时，我基本上想要以下效果：

不幸的是，FF(mozilla) 中的效果中断了。我得到以下信息：

您可以看到的问题是图像的顶部可以在 FF 中看到。

现在，如果我在 mozilla 中打开我的开发工具并更改

的状态

<div class="caption-wrapper">
</div>

到 :hover 然后在开发工具中添加以下属性 height:50% ，它工作得很好，即图像的该部分不再显示。这很有趣，因为应用于 .caption-wrapper 的效果如下：

@keyframes expand-schedule-header {
    0% {
        width: 75%;
    }

    25% {
        width: 100%;
    }

    50% {
        left: 0;
        /*top: 0;*/
        width: 100%;
        height: 50%;
    }

    100% {
        height: 50%;
        left: 0;
        width: 100%;
        bottom: 50%;
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
}

所以应用的高度确实是50%，那为什么不这样呢？，我也将animation-fill-mode: 设置为both;：

.schedule-info-box:hover .caption-wrapper {
    -webkit-animation-name: expand-schedule-header;
    -o-animation-name: expand-schedule-header;
    animation-name: expand-schedule-header;
    -webkit-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    align-items:center;
}

可以看到该错误HERE（在 chrome 中可以正常工作，在 FF 中不行）。

那么为什么我会遇到这个问题？为什么元素在 FF 中没有占据 50% 的高度？为什么我在背景中看到图像？

【问题讨论】：

嗨，我认为你必须设置第一个标签的高度。就像您正在处理 class='book-online'
@Anil figcaption 是父级，设置为 width:100% 和 height:100% ，我知道对于 % heights and widths 父级必须有明确的高度和宽度！ :)
我怎样才能看到你的代码，实际上你的小提琴工作不正常？
@Anil，我提到小提琴不会重新创建错误.. 对此感到抱歉，请检查我的网站链接。

标签： html css firefox cross-browser

【解决方案1】：

据我所知，这是因为 FireFox 呈现的字体与其他浏览器不同，因此您的元素高度比预期的要短，但是由于您将其设置为 position:absolute，您只需将 top:0 设置为.caption-wrapper 上的 .schedule-info-box:hover

.schedule-info-box:hover .caption-wrapper {
    -webkit-animation-name: expand-schedule-header;
    -o-animation-name: expand-schedule-header;
    animation-name: expand-schedule-header;
    -webkit-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    align-items:center;
    top:0;
}

【讨论】：