kevinbestkiller kevinbestkiller - 14 days ago 6
CSS Question

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?

Answer

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>

Comments