You can see in CSS how these come together. The CSS calls a pre-defined animation you create, assigns it a duration, and tells it how long to repeat.
CSS
@-webkit-keyframes orangePulse {
from { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #ff5c00; -webkit-box-shadow: 0 0 18px #ff5c00; }
to { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; }
}
.orange.button { -webkit-animation-name: orangePulse; -webkit-animation-duration: 3s; }
.button {
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
padding: 5px;
border: 0; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);
-webkit-border-radius: 6px; -moz-border-radius: 6px;
color: #fff;
cursor: pointer;
}
HTML
<input type="button" value="Send To Friend" class="large orange button" />