第一次单击时播放关键帧动画，然后第二次反向播放

Question

我正在尝试完成一个具有动画的wave动画，将屏幕填充到特定点并在导航菜单的第一次单击上停止。当您再次单击导航菜单时，我尝试使其反向播放动画，但是它将不起作用。有谁知道Java / JQuery是否可以实现，如果可以，您该怎么做？当前，它所做的只是将剪辑严格还原到以前的状态，而且我不喜欢剪辑的严格程度。

Exception in Tkinter callback
Traceback (most recent call last):
  File "C:\Program Files\Python37-32\lib\tkinter\__init__.py", line 1705, in __call__
    return self.func(*args)
  File "C:/Users/mcara/PycharmProjects/1/python/1.py", line 5, in sumbit
    print(var.get())
  File "C:\Program Files\Python37-32\lib\tkinter\__init__.py", line 484, in get
    value = self._tk.globalgetvar(self._name)
UnicodeDecodeError: 'utf-8' codec can't decode byte 0xed in position 0: invalid continuation byte

$(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;
  }
}

Answer 1

代码的JS部分的最后一行将clicked类添加到.circ元素中。上完该课程后，第二次单击您的汉堡菜单图标将触发新的unwave动画，我只需反转原始to动画的from和wave值即可

$(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>