簡單播放/暫停 CSS animation 帶切換圖標的按鈕

Question

任何人都可以通過向我的文本滾動 animation 添加一個簡單的播放/暫停按鈕來幫助我嗎？。 我只需要使用<i class="fa-regular fa-circle-play"></i>和<i class="fa-regular fa-circle-pause"></i>將按鈕用作圖標但根據 animation state 一次只顯示一個圖標。

我正在使用 js 代碼從@guradio 進行翻轉

 // for selecting the input field on clicking over the flip text function selectText() { const input = document.getElementById('searchInput'); input.focus(); input.select(); } // for flipping the text $('#searchInput').keyup(function() { if ($(this).val().length == 0) { $('#text-flip').show(); } else { $('#text-flip').hide(); } }).keyup();

 #text-flip { height:20px; overflow:hidden; margin-top: -20px; } #text-flip > div > div { color: rgb(43, 43, 43); padding-left: 60px; height:45px; margin-bottom:45px; display:inline-block; font-size: inherit } #text-flip div:first-child { animation: show 10s linear infinite; } @keyframes show { 0% {margin-top:-270px;} 5% {margin-top:-180px;} 33% {margin-top:-180px;} 38% {margin-top:-90px;} 66% {margin-top:-90px;} 71% {margin-top:0px;} 99.99% {margin-top:0px;} 100% {margin-top:-270px;} }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="#" method="get"> <input id="searchInput" placeholder="Search: "/> <div id="text-flip" onclick="selectText()"> <div><div>Third Text</div></div> <div><div>Second Text</div></div> <div><div>First Text</div></div> </div> </form>

Answer 1

我更新了你的代碼。

 let isPlayed=true; // for flipping the text $('#searchInput').keyup(function() { if ($(this).val().length == 0) { $('#text-flip').show(); } else { $('#text-flip').hide(); } }).keyup(); function btnClicked() { if(isPlayed) $(".controlBtn").html("<i class='fa-solid fa-circle-play' onclick='btnClicked()'></i>"); else $(".controlBtn").html("<i class='fa-solid fa-circle-pause' onclick='btnClicked()'></i>"); $("#text-flip div:first-child").toggleClass("flip-animation"); isPlayed =;isPlayed. } function selectText() { const input = document;getElementById('searchInput'). input;focus(). input;select(); }

 #text-flip { height:20px; overflow:hidden; margin-top: -20px; } #text-flip > div > div { color: rgb(43, 43, 43); padding-left: 60px; height:45px; margin-bottom:45px; display:inline-block; font-size: inherit } #text-flip div:first-child { animation: show 10s linear infinite; } @keyframes show { 0% {margin-top:-270px;} 5% {margin-top:-180px;} 33% {margin-top:-180px;} 38% {margin-top:-90px;} 66% {margin-top:-90px;} 71% {margin-top:0px;} 99.99% {margin-top:0px;} 100% {margin-top:-270px;} }.controlBtn { margin-top: 10px; } #text-flip div.flip-animation:first-child { animation-play-state: paused;important; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="#" method="get"> <input id="searchInput" placeholder="Search: "/> <div id="text-flip" class="flip-animation" onclick="selectText()"> <div><div>Third Text</div></div> <div><div>Second Text</div></div> <div><div>First Text</div></div> </div> </form> <div class="controlBtn"><i class="fa-solid fa-circle-pause" onclick="btnClicked()"></i></div>