is it possible to have a css animation play whilst left click is being held?-CodePudding

I want a CSS animation to play when left click is being held (anywhere on the page), then when you let go, it plays a different animation, whilst it is being held it should stay on the last keyframe of the first animation, until you let go. like a normal default CSS animation just instead of playing out constantly, its only when the mouse is held, and then another for when you let go.

this can be done in either JS or CSS, I dont mind, whatever works, works. my current code:

body{
  background-color: #1c1c1c;
}

.animate{
  background-color: white;
  position: relative;
  height: 50px;
  width: 59px;
  animation-name: mousein;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

/*To play when you hold on left click*/
@keyframes mousein{
  0%{rotate: 0deg;}
  
  100%{rotate:45deg;}   /*to hold when the animation has finished but you dont release*/
}

/* to be played when the mouse is let go of */
@keyframes mouseout{
  0%{rotate: 45deg;}
  
  100%{rotate:0deg;}
}

<body>
  <div >
  </div>
</body>

CodePudding user response：

I'm not 100% sure what your end idea is but I think you are looking for something like the following which really is just a toggle between mousedown and mouseup events with respect to the small amount of animation-duration you have.

You can use css variables passed from javascript to css through the root element. Set the keyframe animations property values using these css variables. You can set the opposing start and finish keyframes to the same degree initially. Then basically toggle their states of degrees as you listen for the two events in concert with each other.

If this is not what you were after let me know and I will edit the code or remove this answer.

// i did not include the use of a variable to track states as setProperty
// and the very eventListener does that for this example... this can easily be reimplemented
var mouseIsDown = false;

// pass in the varaible name and value, since they
// are the finish of in and start of out, their 
// values can be the same value at the same time so only
// one variable is needed to manipulate both keyframe animations
// set the css variable value initially
document.documentElement.style.setProperty('--mousein', '0deg')

// the event listener for mousedown
window.addEventListener('mousedown', function() {
  // set the mousein variable to 45deg
  document.documentElement.style.setProperty('--mousein', '45deg')
});

window.addEventListener('mouseup', function() {
  // set the mousein variable to 0deg
  document.documentElement.style.setProperty('--mousein', '0deg')
});

body {
  background-color: #1c1c1c;
}

.animate {
  background-color: white;
  position: relative;
  height: 50px;
  width: 59px;
  animation-name: mousein;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}


/*To play when you hold on left click*/

@keyframes mousein {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: var(--mousein);
  }
  /*to hold when the animation has finished but you dont release*/
}


/* to be played when the mouse is let go of */

@keyframes mouseout {
  0% {
    rotate: var(--mousein);
  }
  100% {
    rotate: 0deg;
  }
}

<body>
  <div >
  </div>
</body>