CODEWITHSUNDEEP
csscss-transitions
LauraNMS
LauraNMS

Reputation: 2863

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

Upvotes: 1

Views: 37

Answers (1)

Johannes
Johannes

Reputation: 67778

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...

Upvotes: 1

Related Questions