Visa ett inlägg
Oläst 2013-12-26, 01:50 #6
pelmereds avatar
pelmered pelmered är inte uppkopplad
Har WN som tidsfördriv
 
Reg.datum: May 2010
Inlägg: 1 342
pelmered pelmered är inte uppkopplad
Har WN som tidsfördriv
pelmereds avatar
 
Reg.datum: May 2010
Inlägg: 1 342
Du får göra det med custom-annimation och keyframes. T.ex. såhär:

Kod:
.delayed-fading-text {
        opacity: 0;
        animation: fadeIn 3s linear 5s;
        -webkit-animation: fadeIn 3s linear 5s;
}

@keyframes fadeIn
{
    0%  {opacity: 0;}
    100%  {opacity: 1;}
}
@-webkit-keyframes fadeIn
{
    0%  {opacity: 0;}
    100%  {opacity: 1;}
}
Med den här koden är animationens längd 10 sekunder vilket gör att texten börjar fadea in efter 5 sekunder och har når 100% opacitet på 3 sekunder, vilket innebär att texten får 100% opacitet 8 sekunder efter att sidan laddades.

Notera att koden är otestad skriven ur minnet, men den bör fungera.
pelmered är inte uppkopplad   Svara med citatSvara med citat