LauraNMS LauraNMS - 1 year ago 58
CSS Question

css transition from a tutorial not working even with -webkit- and -moz- prefixes

This may have an obvious answer, but I'm just not seeing it. I updated this code to correct for having the wrong

top
value for
article section h1
. I also added a
:hover
trigger for
article section h1
. Otherwise, this is the same code I took from webdesigner magazine to demonstrate an animated title effect, but nothing is happening in either FF or Chrome. I added the -webkit- and -moz- prefixes to the transition style, but still, nothing. Please tell me what I'm doing wrong.



body,html {
display:block;
width: 100%;
height: 100%;
background: white;
color:black;
padding: 0;
margin: 0;
font-family: Helvetica, sans-serif;
}
nav {
position:fixed;
top: 0;
width: 100%;
z-index: 9999;
background: white;
}
article {
position: relative;
padding-top: 5em;
}
article section {
position: absolute;
opacity: 0;
width: 100%;
}
article section:target {
left: 0;
opacity: 1;
z-index: 9999;
}
article section h1 {
position: absolute;
top: 0em;
left: 0;
font-size: 4em;
width: 100%;
color:black;

}
article section h1:hover {
text-shadow: 0 998em 2 em #000;
transition: text-shadow 1.5s;
-webkit-transition: text-shadow 1.5s;
-moz-transition:text-shadow 1.5s;
}
nav {
display:block;
width: 100%;
padding: 2em;
text-align: center;
}
nav a {
color: black;
text-decoration: none;
padding: 1em 2em;
margin-right: 1em;
}
nav > a:hover {
border-bottom: .5em solid #c00;
}

<nav>
<a href="#first">Option</a>
<a href="#second">Option</a>
<a href="#third">Option</a>

</nav>

<article>
<section id="first">
<h1>First title</h1>
</section>
<section id="second">
<h1>Second title</h1>
</section>
<section id="third">
<h1>Third title</h1>
</section>
</article>





fiddle

Answer Source

I don't know what the expected result is, but anyway: You have top: -1000em; in the rule for article section h1, and there is no other rule which would change this position. So these h1 elements will remain invisible (because they are far off the screen). Change that to top: 0em; for a beginning, and then look for the transitions...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download