CODEWITHSUNDEEP
csscss-transitions
Miles Henrichs
Miles Henrichs

Reputation: 2410

CSS3 Transition Effect

I have recently been studying up a ton on CSS3, and I've made a design just for fun with a ton of unnecessary features and effects. Here it is:

http://wendyhenrichs.com/could/

If you take a look at my navigation bar at the top, you'll notice that when you hover over a link, it moves 7 pixels to the right in a smooth, transition motion.

But then notice, when your take your mouse off the link, it will just immediately hop back into its original position.

Is there any way to make it fade back into position in a smooth motion, as it moved before?

Upvotes: 1

Views: 1209

Answers (1)

clairesuzy
clairesuzy

Reputation: 27624

Yes there's a way.. give it a position to transition back to

you already have the transition on the default a so just set the nav as relative position to back to 0; it will need position: relative too, so if you just put position: relative on the default state, then you just manipulate the left co-ordinate on the hover state

#nav ul li a {
  color: red;
  text-decoration: none;
  position: relative;
  left: 0;
}

#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li a:active {
  color: white;
  left: 7px;
}

Working Example: HERE

Upvotes: 2

Related Questions