Stopping and Starting Animations
You can stop and resume an animation through the animation-play-state property.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#myID {
padding: 5px;
border: medium double black;
background-color: lightgray;
}
#myID {
-webkit-animation-duration: 5000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-name: 'GrowShrink';
}
@-webkit-keyframes GrowShrink {
from {
font-size: large;
border: medium solid black;
}
to {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
</style>
</head>
<body>
<p id="myID">
<span id="myID">CSS</span>
</p>
<p>
<button>Running</button>
<button>Paused</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
document.getElementById("myID").style.webkitAnimationPlayState =
e.target.innerHTML;
};
}
</script>
</body>
</html>
Home
HTML CSS Book
CSS
HTML CSS Book
CSS
Animations:
- CSS animations defines how to move from one CSS style to another.
- Reusing Key Frames
- Stopping and Starting Animations
Related: