CODEWITHSUNDEEP
htmlcss
user6793152
user6793152

Reputation:

Transition for Text

I really love transition in html but i do not know how to do a transition with text or h2. I know for images as it is

    img {
        opacity:0;
        -moz-transition: opacity 2s; /* Firefox 4 */
        -webkit-transition: opacity 2s; /* Safari and Chrome */
        -o-transition: opacity 2s;
        transition: opacity 2s;
        }

then

<img onload="this.style.opacity='1';" src="https://s13.postimg.org/6p9r8rtrr/fgh.jpg" style="width:640px;height:360px;"/>

The Problem is when i try this with h2 or text it doesn't work:

    h2 {
       opacity:0;
       -moz-transition: opacity 2s; /* Firefox 4 */
       -webkit-transition: opacity 2s; /* Safari and Chrome */
       -o-transition: opacity 2s;
       transition: opacity 2s;
       }

then

<h2 onload="this.style.opacity='1';">What Person/Character are you thinking of?</h2>

But this doesn't work. Can anyone help me?

Upvotes: 1

Views: 319

Answers (1)

prasanth
prasanth

Reputation: 22490

Pictures take some time to load, but text doesn't have same behavior and onload isn't currently supported by text elements. Check out CSS3 animation effects for elements on W3schools tutorial.

Snippet

h2 {
    opacity: 0;
    animation: fadein 2s forwards;
}
@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
<h2>What Person/Character are you thinking of?</h2>

Upvotes: 2

Related Questions