CodingForums.com - Animated heading problems

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Animated heading problems (http://www.codingforums.com/showthread.php?t=281202)

Animated heading problems

I've created a heading with two animations - one repeats once and fades the text in, the second one changes the text's shadow opacity and repeats infinitely.

Problem one is since i put the animation in, the page itself now loads halfway down instead of at the top like normal. i think maybe it's the way i'm positioning the heading? i've tried relative, and leaving position out altogther but it didn't change anything.

Two, i'm including both these animations in one ID - is this okay to do? When I first made it, it would do the fade and then the shadow, but now it seems to ignore the fade. could be related to first problem, i don't know.

example code of how I'm animating:
html

Code:

<h1 id="posw">W</h1>

css

Code:

h1{     position: absolute;

        float: left;

        font-family: 'BenthamRegular';

        text-align: center;

        font-size: 54px;

        color: #fafefe;        

}

#posw{ position: relative;

        top: 0px;

        left: 77px;

        -moz-animation: fadein 2s linear 1;

        -webkit-animation: fadein 9s linear 1;

        -ms-animation: fadein 9s linear 1;

        -o-animation: fadein 9s linear 1;

        animation: fadein 9s linear 1;



        -moz-animation: shadow 3s linear infinite;

        -webkit-animation: shadow 3s linear infinite;

        -ms-animation: shadow 3s linear infinite;

        -o-animation: shadow 3s linear infinite;

        animation: shadow 3s linear infinite;



}



@-moz-keyframes fadein {

        from { opacity: 0; }

        to { opacity: 1; }

}

@-webkit-keyframes fadein {

        from { opacity: 0; }

        to { opacity: 1; }

}

@-ms-keyframes fadein {

        from { opacity: 0; }

        to { opacity: 1; }

}

@-o-keyframes fadein {

        from { opacity: 0; }

        to { opacity: 1; }

}

@keyframes fadein {

        from { opacity: 0; }

        to { opacity: 1; }

}

@-moz-keyframes shadow {

        from {         text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }

        50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }

        to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }

}

@-webkit-keyframes shadow {

        from {         text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }

        50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }

        to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }

}

@-ms-keyframes shadow {

        from {         text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }

        50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }

        to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }

}

@-o-keyframes shadow {

        from {         text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }

        50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }

        to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }

}

@-keyframes shadow {

        from {         text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }

        50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }

        to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }

}

Hi there backa,

the cause of the page loading "half way down" is the highlighted in red attribute here...

Code:



<input type="text" id="name" name="name" 

value="" placeholder="Enter your name" autofocus="autofocus" 

 required="required"  />

As for the animation, why not put all the changes in a single "from to", as indicated in this other thread of yours...

http://www.codingforums.com/showthread.php?t=280977

coothead

Thanks again, coothead!

It was the autofocus, although previously it was giving focus to the field while loading normally. Any other way i can get the first field focused?

I put the transitions comma-separated on one line as below, and all is working now. Much appreciated.

Code:

        -moz-animation: fadein 2.6s linear 1, shadow 3s linear infinite;

        -webkit-animation: fadein 9s linear 1, shadow 3s linear infinite;

        -ms-animation: fadein 9s linear 1, shadow 3s linear infinite;

        -o-animation: fadein 9s linear 1, shadow 3s linear infinite;

        animation: fadein 9s linear 1, shadow 3s linear infinite;

Hi there backa,

put this javascript in the head section of your document...

Code:

<script type="text/javascript">



function init(){



  onscroll=function(){



  window.scrollY?

  sy=window.scrollY:

  sy=document.body.parentNode.scrollTop;



if((sy>0)&&(sy<=600)){

  document.getElementById('name').focus();

   }

else {

  document.getElementById('name').blur();

   }

  }

 }



  window.addEventListener?

  window.addEventListener('load',init,false):

  window.attachEvent('onload',init);



</script>

coothead