NqMWbq

index.html

<div class="box_animation"></div>

<p>This box will animate for 4 seconds and go back to the original color.</p>

<p><strong>Remember: animation-duration property is required for this to work</strong></p>

NqMWbq.markdown

NqMWbq

A Pen by Captain Anonymous on CodePen.

License.

style.css

.box_animation {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}