WHEN ANIMATION SHOULD CEASE AFTER BEING RELEASED
To ensure the animation begins in an active state, it should be initiated during interaction. Your current code activates it upon page load, preventing activation via another button press.
To rectify this issue, consider incorporating the following adjustments:
.dice-wrapper {
position: absolute;
/* top: 50%; */
top: 209px;
right: -9px;
/* left: 50%; */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}
.dice-wrapper:active { // :active is the pseudo class when mouse is down
-webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear; /* Firefox 5-15 */
-o-animation: myOrbit 4s linear; /* Opera 12+ */
animation: myOrbit 4s linear; /* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
// Keyframes...
Implementing this adjustment will allow the animation to trigger on button press and halt upon release.
WHEN ANIMATION SHOULD NOT HALT AFTER BEING RELEASED
If avoiding JavaScript is necessary, achieving this behavior becomes unattainable.
With JavaScript, make the following CSS modification:
.dice-wrapper {
position: absolute;
/* top: 50%; */
top: 209px;
right: -9px;
/* left: 50%; */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}
.dice-wrapper.pressed { // .pressed class will be added in JavaScript
-webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear; /* Firefox 5-15 */
-o-animation: myOrbit 4s linear; /* Opera 12+ */
animation: myOrbit 4s linear; /* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
// Keyframes...
Note that :active has been replaced by .pressed
Incorporate the pressed class using JavaScript (using jQuery):
$(".dice-wrapper").click(function(){
$(this).addClass("pressed"); // Activate the animation
})
Swap out click for mousedown to initiate the animation on button press. Utilize the setTimeout function to cease the animation:
$("#button").click(function(){
$(this).addClass("pressed");
})
setTimeout(function(){
$(this).removeClass("pressed")
}, 2000); // 2 seconds = 2000 milliseconds