Play a keyframe animation on first click and play back in reverse on second
Question
I am trying to complete a wave animation that has the animation, fills the screen to a certain point and stops on the first click on a navigation menu. I have tried making it play the animation back in reverse when you click the navigation menu again, but it will not work. Does anyone know if this is possible with Java/ JQuery, and if so how do you do it? Currently all it does is a harsh clip back to the previous state, and I don't like how harshly it clips.
$(document).ready(function() { $('.hb_menu').click(function() { $('.line_1').toggleClass("rotate_1"); $('.line_2').toggleClass("rotate_2"); $('.line_3').toggleClass("rotate_2"); $('.hidden_svg').toggleClass("show_svg"); $('.circ').toggleClass("rotate_circ"); }); });
body { font-family: 'Raleway', Arial, Verdana, sans-serif; overflow-x: hidden; } a { text-decoration: none; color: white; } .main_hd_cont { position: absolute; top: -1.25vw; left: 1.5vw; z-index: 4; color: white; } .main_hd_txt { font-size: 3.5vw; font-family: 'ballet_harmonyballet_harmony'; } .navigation_svg { position: absolute; top: 0; left: 0; z-index: 1; max-width: 100vw; width: 100vw; } .visible_svg { filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6)); } .hidden_svg { position: absolute; top: 0; left: 0; opacity: 0; transition: 1s; z-index: 2; filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6)); } .show_svg { opacity: 1; } .hb_menu { max-width: 2vw; width: 2vw; max-height: 1.75vw; height: 1.75vw; position: absolute; right: 1.5vw; top: 1.5vw; z-index: 4; } .line_1, .line_2, .line_3 { max-width: 2vw; width: 2vw; max-height: .25vw; height: .25vw; background-color: #fff; position: absolute; right: 0; z-index: 2; top: 0vw; transition: .5s all; margin-bottom: .25vw; } .line_2 { top: .5vw; } .line_3 { top: 1vw; } .rotate_1 { transform: rotate(45deg); } .rotate_2 { transform: rotate(-45deg); top: 0vw; } .main_nav_cont { max-width: 50vw; width: 50vw; max-height: 50vw; height: 50vw; position; absolute; top: 25vw; left: 25vw; font-size: 1.75vw; z-index: 4; } .circ { position: absolute; top: -41vw; max-width: 45vw; width: 45vw; max-height: 48vw; height: 48vw; background-color: #8C572B; border-radius: 14.6675vw; } .rotating_circle_1 { left: -10vw; } .rotating_circle_2 { left: 10vw; } .rotating_circle_3 { left: 30vw; } .rotating_circle_4 { left: 50vw; } .rotating_circle_5 { left: 70vw; } .rotate_circ { animation: wave 15s 1 ease-in-out; animation-fill-mode: forwards; } @keyframes wave { from { transform: rotate(360deg); max-height: 48vw; height: 48vw; } to { transform: rotate(-360deg); max-height: 80vw; height: 80vw; } }
<!DOCTYPE html> <html> <head> <title>Code Cafe | Home </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script> <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script src="../JavaScript/main.js"></script> <style> @font-face { font-family: 'ballet_harmonyballet_harmony'; src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } </style> </head> <body> <section class="main_hd_cont"> <header class="main_hd"> <h1 class="main_hd_txt">Hello World</h1> </header> </section> </nav> </section> <section class="hb_menu"> <div class="line_1"></div> <div class="line_2"></div> <div class="line_3"></div> </section> <div class="rotating_circle_1 circ"></div> <div class="rotating_circle_2 circ"></div> <div class="rotating_circle_3 circ"></div> <div class="rotating_circle_4 circ"></div> <div class="rotating_circle_5 circ"></div> </body> </html>
1 answers
solution1
1 ACCPTED 2019-04-02 21:37:34
The last line in the JS portion of your code adds a clicked class to the .circ element. Once that class is on, the second click on your hamburger menu icon will trigger new unwave animation I made by just reversing the to and from values of the original wave animation.
$(document).ready(function() { $('.hb_menu').click(function() { $('.line_1').toggleClass("rotate_1"); $('.line_2').toggleClass("rotate_2"); $('.line_3').toggleClass("rotate_2"); $('.hidden_svg').toggleClass("show_svg"); $('.circ').toggleClass("rotate_circ"); $(".circ").addClass("clicked"); // adds "clicked" after the very first click }); });
body { font-family: 'Raleway', Arial, Verdana, sans-serif; overflow-x: hidden; } a { text-decoration: none; color: white; } .main_hd_cont { position: absolute; top: -1.25vw; left: 1.5vw; z-index: 4; color: white; } .main_hd_txt { font-size: 3.5vw; font-family: 'ballet_harmonyballet_harmony'; } .navigation_svg { position: absolute; top: 0; left: 0; z-index: 1; max-width: 100vw; width: 100vw; } .visible_svg { filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6)); } .hidden_svg { position: absolute; top: 0; left: 0; opacity: 0; transition: 1s; z-index: 2; filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6)); } .show_svg { opacity: 1; } .hb_menu { max-width: 2vw; width: 2vw; max-height: 1.75vw; height: 1.75vw; position: absolute; right: 1.5vw; top: 1.5vw; z-index: 4; } .line_1, .line_2, .line_3 { max-width: 2vw; width: 2vw; max-height: .25vw; height: .25vw; background-color: #fff; position: absolute; right: 0; z-index: 2; top: 0vw; transition: .5s all; margin-bottom: .25vw; } .line_2 { top: .5vw; } .line_3 { top: 1vw; } .rotate_1 { transform: rotate(45deg); } .rotate_2 { transform: rotate(-45deg); top: 0vw; } .main_nav_cont { max-width: 50vw; width: 50vw; max-height: 50vw; height: 50vw; position; absolute; top: 25vw; left: 25vw; font-size: 1.75vw; z-index: 4; } .circ { position: absolute; top: -41vw; max-width: 45vw; width: 45vw; max-height: 48vw; height: 48vw; background-color: #8C572B; border-radius: 14.6675vw; } .rotating_circle_1 { left: -10vw; } .rotating_circle_2 { left: 10vw; } .rotating_circle_3 { left: 30vw; } .rotating_circle_4 { left: 50vw; } .rotating_circle_5 { left: 70vw; } .rotate_circ { animation: wave 15s 1 ease-in-out; animation-fill-mode: forwards; } /* this new rule only applies after you have clicked once AND the wave animation has already been triggered */ .circ.clicked:not(.rotate_circ) { animation: unwave 15s 1 ease-in-out; animation-fill-mode: forwards; } @keyframes wave { from { transform: rotate(360deg); max-height: 48vw; height: 48vw; } to { transform: rotate(-360deg); max-height: 80vw; height: 80vw; } } @keyframes unwave { from { transform: rotate(-360deg); max-height: 80vw; height: 80vw; } to { transform: rotate(360deg); max-height: 48vw; height: 48vw; } }
<!DOCTYPE html> <html> <head> <title>Code Cafe | Home </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script> <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script src="../JavaScript/main.js"></script> <style> @font-face { font-family: 'ballet_harmonyballet_harmony'; src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } </style> </head> <body> <section class="main_hd_cont"> <header class="main_hd"> <h1 class="main_hd_txt">Hello World</h1> </header> </section> </nav> </section> <section class="hb_menu"> <div class="line_1"></div> <div class="line_2"></div> <div class="line_3"></div> </section> <div class="rotating_circle_1 circ"></div> <div class="rotating_circle_2 circ"></div> <div class="rotating_circle_3 circ"></div> <div class="rotating_circle_4 circ"></div> <div class="rotating_circle_5 circ"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I play a keyframe animation on click?
On first click animate, on second reverse animation: how to?
Making keyframe animation play after every 5 seconds
Reverse animation on a second click
Javascript play sound on click, second button click stop first sound
Simple animation play/reverse button
Reverse Keyframe animation with Javascript
jquery reverse animation on second click
Reverse play animation JS when mouseleave.
HowTo: First click animation 1, second click animation 2
Related Tags