1

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?

Semyazas
  • 2,101
  • 14
  • 14
  • `onload` doesn't work for `h2` it is only for whole document, images, scripts and other resources. – Mohammad Usman Nov 18 '16 at 13:48
  • 1
    why use `onload` for text directly apply with in a css.pictures are take a time for loading.but text not like that.and onload not support with text – prasanth Nov 18 '16 at 13:50
  • 1
    Take a look at this: http://stackoverflow.com/questions/6805482/css3-transition-animation-on-load – kzhao14 Nov 18 '16 at 13:53

1 Answers1

2

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>
PDKnight
  • 712
  • 6
  • 25
prasanth
  • 22,145
  • 4
  • 29
  • 53