Simple play/pause CSS animation button with switching icon

Question

Could anyone help me by adding a simple play/pause button to my text scrolling animation?. I need the button to work as an icon only using <i class="fa-regular fa-circle-play"></i> and <i class="fa-regular fa-circle-pause"></i> but display only one icon at a time according to the animation state.

I'm using the js code for flipping from @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

I updated your code.

 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>