Animation demo

by Ayyappan Sakthivadivel

HTML

<div>
<h1 style="animation-delay: 1s;">ONE</h1>
<h1 style="animation-delay: 6s;">TWO</h1>
<h1 style="animation-delay: 3s;">THREE</h1>
</div>

CSS

h1 {
    animation-name: slidein;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    font-size: 1.0em;
    font-family: Arial;
    font-weight:bold;
    visibility: hidden;
}
@keyframes slidein {
    0% {
        visibility: visible;
        color: blue;
        margin-left: 100%;
    }
    100% {
        visibility: visible;
        color: blue;
        margin-left: 0%;
    }
}
div {
    border: 1px dotted gray;
    overflow: hidden;
}