使用CSS動畫而不是循環使用gif

我只想基本顯示文本並隱藏，然後下一個文本並隱藏，然後上一個文本並隱藏並重復。我怎樣才能做到這一點？我一直在看代碼，但我仍然迷失。任何幫助是極大的讚賞！使用CSS動畫而不是循環使用gif

我的代碼：

<style> 
    #myArea { 
    height:250px; 
    width:300px; 
    position:relative; 
    } 

    .text { 
    position:absolute; 
    z-index:1; 
    bottom:20px; 
    left:10px; 
    } 
</style> 
<body> 
    <div id="myArea"> 
    <img src="images/backgrnd.jpg" /> 
    <div id="txt1" class="text"> 
     <img src="images/text1.png" /> 
    </div> 
    <div id="txt2" class="text"> 
     <img src="images/text2.png" /> 
    </div> 
    <div id="txt3" class="text"> 
     <img src="images/text3.png" /> 
    </div> 
    </div>

來源

2016-03-14 Damien

你可能尋找steps計時功能？它提供了一種類似gif的方式來爲圖像集製作動畫效果！

有一個例子：https://jsfiddle.net/simurai/CGmCe/

從MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

希望它能幫助！

來源

2016-03-15 06:17:23 Hitmands

有趣的觀點。建議'steps'聽起來合乎邏輯，但在應用於多個元素時不會產生相同的效果。它最適合於精靈和單個元素。在使用多個元素時，關鍵幀必須以這樣的方式進行編碼，以便在動畫時其餘部分保持隱藏狀態。（*我不是揣測你的答案，只是說明OP的好處*） – Harry

不是我在找什麼，但超級酷無一例外 – Damien

實現你正在尋找它的效果是相當簡單的。所有需要的是讓您將圖像完全放在彼此的頂部，然後添加一個動畫，相應地更改圖像（或其容器）的opacity。

動畫在一個循環中的多個元素時，關鍵部件是

確保第二和後續元素的動畫開始後，以前所有的元素都完成了自己的動畫和
確保所有之前的元素將保持最終狀態，直到其他元素完成其動畫（否則它們會混淆動畫）。

第一部分可以通過，而第二部分是通過相應地設置@keyframes取得的元件使用漸進animation-delay來實現。在這裏，由於有3個圖像，每個圖像的動畫應該以33％的標記完成（因爲在另外66％中，其他2個將執行它們的動畫）。 33％的州應維持到100％。

（如果你有4張圖片，它應該完成25％等。）

#myArea { 
 
    height: 250px; 
 
    width: 300px; 
 
    position: relative; 
 
} 
 
.text { 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 20px; 
 
    left: 10px; 
 
    opacity: 0; 
 
    animation: fade-in-out 9s ease backwards infinite 1s; /* initial delay is for image to load */ 
 
} 
 
.text:nth-of-type(2) { 
 
    animation-delay: 4s; /* this must start after first has faded-out */ 
 
} 
 
.text:nth-of-type(3) { 
 
    animation-delay: 7s; /* this must start after second has also faded-out */ 
 
} 
 
@keyframes fade-in-out { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    11%, 22% { 
 
    opacity: 1; 
 
    } 
 
    33%, 100% { 
 
    opacity: 0; 
 
    } 
 
}

<div id="myArea"> 
 
    <img src="http://lorempixel.com/300/250/abstract/2" /> 
 
    <div id="txt1" class="text"> 
 
    <img src="http://lorempixel.com/200/200/animals/1" /> 
 
    </div> 
 
    <div id="txt2" class="text"> 
 
    <img src="http://lorempixel.com/200/200/animals/2" /> 
 
    </div> 
 
    <div id="txt3" class="text"> 
 
    <img src="http://lorempixel.com/200/200/animals/3" /> 
 
    </div> 
 
</div>

來源

2016-03-15 06:11:02 Harry

一如既往的好答案。在這種動畫中將延遲設置爲負值非常有用。它有助於確保動畫的所有周期工作相同 – vals

謝謝@vals。明白「你是在暗示什麼」而不是「爲什麼」。是否有任何文章或鏈接可以閱讀更多內容？如果是，請分享，明天早上我會看看:) – Harry

我沒有手頭上的參考資料，我可以分享...但我看過一些關於動畫的問題，他們說「我的動畫第一時間，但在第二次迭代時出錯「通常，如果設置正向動畫延遲，則初始狀態非常重要。但是，如果您設置負向延遲，則僅**使用動畫屬性。將嘗試找到一個例子:-) – vals

使用CSS動畫而不是循環使用gif

回答

相關問題