Reusing Key Frames

You can use the same set of key frames for multiple animations.

            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; 
            <span id="myID">CSS</span>
            <span id="myCSS">HTML</span>
Click to view the demo
  HTML CSS Book 

  1. CSS animations defines how to move from one CSS style to another.
  2. Reusing Key Frames
  3. Stopping and Starting Animations