Repeat CSS transition/animation duration continuously on button click?

Question

I have a simple 2 sided "card" with a button on the front (labled "next") and another button on the back (labeled "back"). Each button triggers jquery to rotate the "card" vertically, using a transition-duration: 2s so it is visible that the card is being "flipped", instead of just an instant flip. My problem is that after I hit each button once, I can not get the "transition-duration / animation-duration" to trigger again. I can try to put it inside my Jquery function, but I do not understand why my CSS animation duration is not triggered on each button click (It only works for 1 click per button, the "card" flips accordingly to the back, and then to the front again once I press the buttons once). I have taken out most of the information from my form, so it is a little easier to tell what I am asking for. Any help would be appreciated.

 $(document).ready(function() { $("input[name='next']").on("click", function() { console.log("The NEXT Button Worked!"); $(".form").css("transform", "rotateY(180deg)"); }) $("input[name='back']").on("click", function() { console.log("The BACK Button Worked!"); $(".formFlipAgain").css("transform", "rotateY(180deg)"); }) }); function showBack() { setTimeout(function() { document.getElementById("backSide").style.display = "block"; }, 600); setTimeout(function() { document.getElementById("frontSide").style.display = "none"; }, 600); }; function showFront() { setTimeout(function() { document.getElementById("frontSide").style.display = "block"; }, 600); setTimeout(function() { document.getElementById("backSide").style.display = "none"; }, 600); }; 

 .form { transform-style: preserve-3d; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } .formFlipAgain { transform-style: preserve-3d; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } #flex { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: space-between; } .formTitle { border-bottom: solid red; } .form-style-5 { position: relative; top: 0px; max-width: 60%; max-height: 82vh; padding: 10px 20px; background: #f4f7f8; margin: 10px auto; border-radius: 8px; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; } #form-style-5-Animation { animation: slide 3s 1; } @keyframes slide { 0% { transform: translate3d(0px, 1000%, 0px); } 100% { transform: translate3d(0px, 0%, 0px); } } .form-style-5:after { opacity: 1; } .form-style-5 fieldset { border: none; } .form-style-5 legend { font-size: 1.4em; margin-bottom: 10px; } .form-style-5 label { font-size: 1.3em; display: block; margin-bottom: 8px; } .form-style-5 input[type="text"], .form-style-5 input[type="date"], .form-style-5 input[type="datetime"], .form-style-5 input[type="email"], .form-style-5 input[type="location"], .form-style-5 input[type="number"], .form-style-5 input[type="search"], .form-style-5 input[type="time"], .form-style-5 input[type="url"], .form-style-5 select { font-family: Georgia, "Times New Roman", Times, serif; background: rgba(255, 255, 255, .1); border: none; border-radius: 4px; font-size: 16px; margin: 0; outline: 0; padding-left: 2%; height: 6%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background-color: #e8eeef; color: #8a97a0; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; margin-bottom: 3%; } .form-style-5 textarea { font-family: Georgia, "Times New Roman", Times, serif; background: rgba(255, 255, 255, .1); border: none; border-radius: 4px; font-size: 16px; margin: 0; outline: 0; padding-left: 2%; height: 12%; /*Changing height for task textarea*/ width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background-color: #e8eeef; color: #8a97a0; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; margin-bottom: 3%; } .form-style-5 input[type="text"]:focus, .form-style-5 input[type="date"]:focus, .form-style-5 input[type="datetime"]:focus, .form-style-5 input[type="email"]:focus, .form-style-5 input[type="number"]:focus, .form-style-5 input[type="search"]:focus, .form-style-5 input[type="time"]:focus, .form-style-5 input[type="location"]:focus, .form-style-5 textarea:focus, .form-style-5 select:focus { background: #d2d9dd; } .form-style-5 select { -webkit-appearance: menulist-button; height: 35px; } .form-style-5 .number { background: red; color: #FCFBE3; height: 25px; width: 25px; display: inline-block; font-size: 0.8em; margin-right: 4px; line-height: 25px; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); border-radius: 0px 15px 15px 15px; margin-bottom: 3%; } .form-style-5 input[type="submit"], .form-style-5 input[type="button"] { position: relative; display: block; padding: 10px 39px 10px 39px; color: #FCFBE3; margin: 0 auto; background: red; font-size: 22px; text-align: center; font-style: normal; width: 100%; border: 1px solid red; border-width: 1px 1px 3px; margin-bottom: 10px; box-shadow: 0 5px 0 #b30000; border-radius: 4px; } .form-style-5 input[type="backButton"] { position: relative; display: block; padding: 10px 39px 10px 39px; color: #FCFBE3; margin: 0 auto; background: red; font-size: 22px; text-align: center; font-style: normal; width: 140px; border: 1px solid red; border-width: 1px 1px 3px; margin-bottom: 10px; box-shadow: 0 5px 0 #b30000; border-radius: 4px; } .form-style-5 input[type="submit"]:active, .form-style-5 input[type="button"]:active { transform: translateY(3px); box-shadow: 0 2px 0 #b30000; } .form-style-5 input[type="submit"]:focus, .form-style-5 input[type="button"]:focus { outline: 0; } .next { -webkit-transition-duration: .01s; -moz-transition-duration: .01s; -o-transition-duration: .01s; transition-duration: .01s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } #backSide { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } #backButton { background: red; color: white; box-shadow: 0 2px 0 #b30000; border-radius: 4px; border-color: red; position: absolute; float: left; left: 15px; top: 3px; padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px; width: 90px; height: 27px; font-size: 105%; outline: 0; } #name, #contact, #location, #misc, #job { height: 5%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="formFlipAgain"> <div class="form" style="background-color:black"> <div class="form-style-5" id="form-style-5-Animation"> <div id="frontSide"> <form action="send-sms.php" method="POST"> <input type="text" name="field1" id="name" placeholder="Your Name *"> <input name="next" type="button" value="Next &#x21fe;" class="next" onClick="showBack();" /> </div> <div id="backSide" style="display: none;"> <input name="back" class="Button" type="button" onClick="showFront();" value="&#x21fd; &nbsp; back" id="backButton" /> </div> </div> </form> </div> </div> 

Answer 1

I think this is the result you want to achieve , you don't need extra class '.formFlipAgain' .You rotate the div with class '.form' 180 deg , and it remains in that situation and this causes the instant flip, you just need to rotate it back .

 $(document).ready(function() { $("input[name='next']").on("click", function() { console.log("The NEXT Button Worked!"); $(".form").css("transform", "rotateY(180deg)"); }) $("input[name='back']").on("click", function() { console.log("The BACK Button Worked!"); $(".form").css("transform", "rotateY(0deg)"); }) }); function showBack() { setTimeout(function() { document.getElementById("backSide").style.display = "block"; }, 600); setTimeout(function() { document.getElementById("frontSide").style.display = "none"; }, 600); }; function showFront() { setTimeout(function() { document.getElementById("frontSide").style.display = "block"; }, 600); setTimeout(function() { document.getElementById("backSide").style.display = "none"; }, 600); }; 

 .form { transform-style: preserve-3d; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } .formFlipAgain { transform-style: preserve-3d; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } #flex { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: space-between; } .formTitle { border-bottom: solid red; } .form-style-5 { position: relative; top: 0px; max-width: 60%; max-height: 82vh; padding: 10px 20px; background: #f4f7f8; margin: 10px auto; border-radius: 8px; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; } #form-style-5-Animation { animation: slide 3s 1; } @keyframes slide { 0% { transform: translate3d(0px, 1000%, 0px); } 100% { transform: translate3d(0px, 0%, 0px); } } .form-style-5:after { opacity: 1; } .form-style-5 fieldset { border: none; } .form-style-5 legend { font-size: 1.4em; margin-bottom: 10px; } .form-style-5 label { font-size: 1.3em; display: block; margin-bottom: 8px; } .form-style-5 input[type="text"], .form-style-5 input[type="date"], .form-style-5 input[type="datetime"], .form-style-5 input[type="email"], .form-style-5 input[type="location"], .form-style-5 input[type="number"], .form-style-5 input[type="search"], .form-style-5 input[type="time"], .form-style-5 input[type="url"], .form-style-5 select { font-family: Georgia, "Times New Roman", Times, serif; background: rgba(255, 255, 255, .1); border: none; border-radius: 4px; font-size: 16px; margin: 0; outline: 0; padding-left: 2%; height: 6%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background-color: #e8eeef; color: #8a97a0; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; margin-bottom: 3%; } .form-style-5 textarea { font-family: Georgia, "Times New Roman", Times, serif; background: rgba(255, 255, 255, .1); border: none; border-radius: 4px; font-size: 16px; margin: 0; outline: 0; padding-left: 2%; height: 12%; /*Changing height for task textarea*/ width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background-color: #e8eeef; color: #8a97a0; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; margin-bottom: 3%; } .form-style-5 input[type="text"]:focus, .form-style-5 input[type="date"]:focus, .form-style-5 input[type="datetime"]:focus, .form-style-5 input[type="email"]:focus, .form-style-5 input[type="number"]:focus, .form-style-5 input[type="search"]:focus, .form-style-5 input[type="time"]:focus, .form-style-5 input[type="location"]:focus, .form-style-5 textarea:focus, .form-style-5 select:focus { background: #d2d9dd; } .form-style-5 select { -webkit-appearance: menulist-button; height: 35px; } .form-style-5 .number { background: red; color: #FCFBE3; height: 25px; width: 25px; display: inline-block; font-size: 0.8em; margin-right: 4px; line-height: 25px; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); border-radius: 0px 15px 15px 15px; margin-bottom: 3%; } .form-style-5 input[type="submit"], .form-style-5 input[type="button"] { position: relative; display: block; padding: 10px 39px 10px 39px; color: #FCFBE3; margin: 0 auto; background: red; font-size: 22px; text-align: center; font-style: normal; width: 100%; border: 1px solid red; border-width: 1px 1px 3px; margin-bottom: 10px; box-shadow: 0 5px 0 #b30000; border-radius: 4px; } .form-style-5 input[type="backButton"] { position: relative; display: block; padding: 10px 39px 10px 39px; color: #FCFBE3; margin: 0 auto; background: red; font-size: 22px; text-align: center; font-style: normal; width: 140px; border: 1px solid red; border-width: 1px 1px 3px; margin-bottom: 10px; box-shadow: 0 5px 0 #b30000; border-radius: 4px; } .form-style-5 input[type="submit"]:active, .form-style-5 input[type="button"]:active { transform: translateY(3px); box-shadow: 0 2px 0 #b30000; } .form-style-5 input[type="submit"]:focus, .form-style-5 input[type="button"]:focus { outline: 0; } .next { -webkit-transition-duration: .01s; -moz-transition-duration: .01s; -o-transition-duration: .01s; transition-duration: .01s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } #backSide { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } #backButton { background: red; color: white; box-shadow: 0 2px 0 #b30000; border-radius: 4px; border-color: red; position: absolute; float: left; left: 15px; top: 3px; padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px; width: 90px; height: 27px; font-size: 105%; outline: 0; } #name, #contact, #location, #misc, #job { height: 5%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="formFlipAgain"> <div class="form" style="background-color:black"> <div class="form-style-5" id="form-style-5-Animation"> <div id="frontSide"> <form action="send-sms.php" method="POST"> <input type="text" name="field1" id="name" placeholder="Your Name *"> <input name="next" type="button" value="Next &#x21fe;" class="next" onClick="showBack();" /> </div> <div id="backSide" style="display: none;"> <input name="back" class="Button" type="button" onClick="showFront();" value="&#x21fd; &nbsp; back" id="backButton" /> </div> </div> </form> </div> </div>