I have a circular menu with the added code "animation: pulse infinite". The menu can be opened and dragged around.
Now, I want to add a pause animation so that it stops for a while when the menu is opened and closed.
I tried adding "animation-play-state" and setting it to "paused", but then the animation does not resume after closing the menu.
Can someone help me figure out how to make the animation resume?
Here is my 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;
}
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<nav class="circular-menu" id="draggable">
<div class="circle">
<!-- save the script -->
...
</div>
<div id="pulsing" onclick="myFunction()">
<a href="" class="menu-button fa fa-bars fa-2x" id="pulsing"></a>
</div>
</nav>
</body>Or check it out here.