2-State Custom Animation Using From-To Pair

• A custom CSS3 Animation can be created using ‘kreyframe‘ property.

• Using Keyframe the animation definition can be given using ‘from’ and ‘to’ keyword.

• These keywords designates the initial state  and final state of an animation.

• Using from/to keyword only 2 states of animation are possible.

• If we need to have multiple state animation, we can use “%” percentage for different state.

• In this Demo, “We will use from/to combination to create 2-state animation for a text to animate size and color “.

• Below Code shows to create custom animation class ‘bckColorAnimation‘.

@keyframes bckColorAnimation {
    from {
        color: Red;
        font-size:10px;
    }
    to {
        color: Green;
        font-size:30px;
    }
}
@-webkit-keyframes bckColorAnimation {
    from {
        color: Red;
        font-size:10px;
    }
    to {
        color: Green;
        font-size:30px;
    }
}
@-moz-keyframes bckColorAnimation {
    from {
        color: Red;
        font-size:10px;
    }
    to {
        color: Green;
        font-size:30px;
    }
}
@-o-keyframes bckColorAnimation {
    from {
        color: Red;
        font-size:10px;
    }
    to {
        color: Green;
        font-size:30px;
    }
}

• Below code shows how to call a animation for the class element,

.name-container {
    -webkit-animation: bckColorAnimation 3s infinite;
    /* Safari 4+ */
    -moz-animation: bckColorAnimation 3s infinite;
    /* Fx 5+ */
    -o-animation: bckColorAnimation 3s infinite;
    /* Opera 12+ */
    animation:bckColorAnimation 3s infinite;
    /* IE 10+ */
    animation-timing-function: ease-in;
}

• The HTML markup we have used for the demo is as below:-

<h3 class='name-container'>
    Sandeep Kumar Patel
</h3>

• Check out below fiddle output:-