title: Pause CSS-animation of the circular menu to open and close
body: <p>I have a circular menu and I added <code>animation: pulse infinite</code>. My menu opens and is draggable.</p>
  <p>I need to add pause-animated that it stops for a time when the menu is opened and closed.</p>
  <p>I add &quot;animation-play-state&quot;, &quot;paused&quot;, it works, but after closing the menu the animation does not resume.</p>
  <p>How to make the animation resume?</p>
  <p>My code:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
  @import "compass/css3";
  body {
    background: #fff;
    height: 100%;
  }
  
  .circular-menu {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  
  .circle {
    width: 250px;
    height: 250px;
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
  }
  
  .open.circle {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
  
  .circle a {
    z-index: auto;
    text-decoration: none;
    color: #0081ee;
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    position: absolute;
    text-align: center;
  }
  
  .tooltip {
    position: fixed;
    padding: 10px 20px;
    border: 1px solid #b3c9ce;
    border-radius: 4px;
    text-align: center;
    font: 14px/1.3 sans-serif;
    color: #333;
    background: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    z-index: 2;
  }
  
  .circle a:hover {
    color: #0081ee;
  }
  
  .menu-button {
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    text-decoration: none;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    border: none;
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    padding: 10px;
    background: #0081ee;
    box-shadow: 0 0 0 0 rgba(#0081ee, .5);
    z-index: 1;
    animation: pulse 1.5s infinite;
  }
  
  .menu-button:hover {
    animation-play-state: paused;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(.9);
    }
    70% {
      transform: scale(1.1);
      box-shadow: 0 0 0 40px rgba(#0081ee, 0);
    }
    100% {
      transform: scale(.9);
      box-shadow: 0 0 0 0 rgba(#0081ee, 0);
    }
  }
  
  .pulsing {
    width: 100%;
    height: 100%;
    margin: 0 auto 0;
    perspective: 1000;
    backface-visibility: hidden;
    background: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
    &lt;nav class="circular-menu" id="draggable"&gt;
      &lt;div class="circle"&gt;
        &lt;!-- save the script --&gt;
        &lt;a href="" class="fa fa-check fa-2x" data-tooltip="сохранить текущий сценарий"&gt;&lt;/a&gt;
        &lt;!-- delete a step --&gt;
        &lt;a href="" class="fa fa-trash fa-2x" data-tooltip="удалить шаг"&gt;&lt;/a&gt;
        &lt;!-- add a step --&gt;
        &lt;a href="" class="fa fa-plus fa-2x" data-tooltip="добавить шаг"&gt;&lt;/a&gt;
        &lt;!-- cancel the creation of script --&gt;
        &lt;a href="" class="fa fa-window-close fa-2x" data-tooltip="отменить создание сценария"&gt;&lt;/a&gt;
        &lt;!-- переход на другой сайт, не знаю, подходит ли иконка --&gt;
        &lt;a href="" class="fa fa-internet-explorer fa-2x" data-tooltip="перейти на другую страницу или сайт"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="pulsing" onclick="myFunction()"&gt;
        &lt;a href="" class="menu-button fa fa-bars fa-2x" id="pulsing"&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Or <a href="https://codepen.io/tatyanavanina/pen/wvzMYYP" rel="nofollow noreferrer">here</a>.</p>