Pause CSS-animation of the circular menu to open and close

Question

I have a circular menu and I added animation: pulse infinite. My menu opens and is draggable.

I need to add pause-animated that it stops for a time when the menu is opened and closed.

I add "animation-play-state", "paused", it works, but after closing the menu the animation does not resume.

How to make the animation resume?

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

.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;
}

Or here.

user_8508777 · Answer

Instead of always adding style for pause animation, try to toggle it. Just as you do for the open and close menu.

In the snippet, all that I've changed is move animation-state: paused to a CSS .paused class, and toggle this class on click.

var items = document.querySelectorAll(".circle a");

for (var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35 * Math.cos(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";

items[i].style.top = (50 + 35 * Math.sin(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
}

let onClickHandler = function (e) {
e.preventDefault();
document.querySelector(".circle").classList.toggle("open");
  document.querySelector(".menu-button").classList.toggle("paused");
    };

document.querySelector(".menu-button").onclick = onClickHandler;

let tooltipElem;
document.onmouseover = function (event) {
let target = event.target;
let tooltipHtml = target.dataset.tooltip;
if (!tooltipHtml) return;
tooltipElem = document.createElement("div");
tooltipElem.className = "tooltip";
tooltipElem.innerHTML = tooltipHtml;
document.body.append(tooltipElem);
let coords = target.getBoundingClientRect();
let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
if (left < 0) left = 0;
let top = coords.top - tooltipElem.offsetHeight - 5;
if (top < 0) {
top = coords.top + target.offsetHeight + 5;
}
tooltipElem.style.left = left + "px";
tooltipElem.style.top = top + "px";
};

document.onmouseout = function (e) {
if (tooltipElem) {
tooltipElem.remove();
tooltipElem = null;
}
};

function setOnClickHandler() {
document.querySelector(".menu-button").onclick = onClickHandler;
}

$(document).ready(function () {
$("#draggable").draggable({
start: function( event, ui ) {
document.querySelector(".menu-button").onclick = null;
},
stop: function( event, ui ) {
document.querySelector(".menu-button").onclick =
setTimeout(setOnClickHandler, 0);
}
});
});

@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, .menu-button.paused {
  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;
}

user_14864918 · Answer

since JavaScript(JQuery) overrides CSS properties, if you want to change whatever back to normal, you need to do it with JavaScript.
change your function to this:

let onClickHandler = function (e) {
  e.preventDefault();
  var a = document.querySelector(".circle");
  document.querySelector(".circle").classList.toggle("open");
  if(a.className == "circle open")
    $(".menu-button").css("animation-play-state", "paused");
  else
    $(".menu-button").css("animation-play-state", "running");
};

I have no idea about JQuery so I do the stuff with JavaScript.

Pause CSS-animation of the circular menu to open and close

2 Answers