懸停動畫無法在Firefox中工作，元素沒有采取關鍵幀屬性

我在我的HTML頁面上懸停動畫，它是自定義的。現在的HTML看起來像這樣：懸停動畫無法在Firefox中工作，元素沒有采取關鍵幀屬性

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（工作在罰款鉻，而不是在FF）。

那麼，爲什麼我有這個問題？爲什麼元素在FF中不佔50％的高度？爲什麼我在背景中看到圖像？

來源

2016-02-26 Alexander Solonik

嗨，我認爲你必須設置1 標籤的高度。就像你正在處理一個類='book-online' –

@Anil figcaption是父級，並設置爲寬度：100％和高度：100％，我知道對於高度和寬度的百分比，父級必須有明確的高度和寬度！ :) –

我怎樣才能看到你的代碼，實際上你的小提琴不能正常工作？ –

從我看到的，因爲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; 
}

來源

2016-02-26 13:02:30 xpy

懸停動畫無法在Firefox中工作，元素沒有采取關鍵幀屬性

回答

相關問題