jquery

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

animate rotate jquery

277

Show ResultJQUERY

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
div {
width: 180px;
height: 100px;
background: orange;
text-align: center;
color: black;
-webkit-animation: mymove 2s infinite linear alternate; /* Chrome, Safari, Opera */
animation: mymove 2s infinite linear alternate;
border: 3px solid black;
}

.paused {
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state: paused;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
to {-webkit-transform: rotateY(180deg);}
}

@keyframes mymove {
to {transform: rotateY(180deg);}
}
</style>
</head>
<body>

<script>

$(document).ready(function () {

$("#stop1").click(function(e) {

$("#test").toggleClass("paused");

});

});

</script>

<button id="stop1">stop/start</button></p>

<div id="test">
<h1>Hello Javascript!</h1>
</div>

</body>
</html>