Jump to content

CSS3 Transition displaying on page load as well as hover


Recommended Posts

I'm trying to implement a CSS3 transition coded as follows:

section#splash_block nav ul li.user h3{	text-align: center;	padding-top: 20px;	padding-bottom: 20px;		-webkit-transition: padding-top 2s, padding-bottom 2s; /* Safari and Chrome - ignoring other browsers for the time being */	transition-property: padding-top, padding-bottom;	transition-duration: 2s, 2s;}section#splash_block nav ul li.user:hover h3{	padding-top: 8px;	padding-bottom: 8px;}

The transition works fine, except that the reverse displays when the page first loads. Obviously I only want this transition to show when hovering of the li but I don't know what I've done wrong.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...