Reusing Key Frames
You can use the same set of key frames for multiple animations.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
}
span {
font-size: large;
border: medium solid black;
}
#myID {
-webkit-animation-duration: 5000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-name: 'ColorSwap';
}
#myCSS {
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: 'ColorSwap';
}
@-webkit-keyframes ColorSwap {
to {
border: medium solid white;
background-color: green;
}
}
</style>
</head>
<body>
<p>
<span id="myID">CSS</span>
<span id="myCSS">HTML</span>
</p>
</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: