Infinity Pro Front Page 1 Text Animation

[kristinad]

Hi, everyone!

A client wants an animation in the front page 1 section (hero image area) of the Infinity pro theme. Basically, he would like one line of the headline(The legal world is complex...) to display, then the other(we will help you find your way.) to fade in underneath it. Any suggestions on the best (and simplest) way to accomplish this? I was looking into sliders but would prefer an alternate solution if possible. Haven't done this before! The link below isn't the actual site but will give you an idea of what I'm talking about.

Thanks for the help!

http://jonathanm.kristinademery.com/blog/

[Brad Dalton]

Add this CSS:

.fade p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 20s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 20s; /* Firefox < 16 */
        -ms-animation: fadein 20s; /* Internet Explorer */
         -o-animation: fadein 20s; /* Opera < 12.1 */
            animation: fadein 20s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

And then add the HTML to a text widget:

---

Tutorials for StudioPress Themes.

[Author]

Posts