0

I just started to code a web page and now at the end I want to add some special animations, I have a horizontal menu which have dropdowns, and I want an animation when I hover this menu points. I have seen this animation with a border on https://harvard.edu Can you help me with this animation? Thanks :D

Fabio Düll
  • 67
  • 8
  • Welcome to stack oveflow. Take not that this isn't a site for people to write code for you, try to do it yourself and if you are stuck at something then show us minimal example that recreates the problem so we can help. Good luck. – Tree Sep 08 '17 at 08:05

2 Answers2

0

since you have not provided any code and did not specify which border animation, i assume you want to animate the bottom border starting from the middle. In that case, this great stackoverflow answer with demo answers it : click here

Palm Tree
  • 54
  • 12
0

That's being done by using a CSS3 transition on the :before pseudo element, attached to the <a> tag in that menu. Search in their CSS for this rule: .nav-group a:before You can see that they're giving that :before pseudo an initial value of 0% width and then on the :hover pseudo, they're setting it to 100%. (Search for .nav-group a:hover:before in the CSS) Because the :before has a CSS transition set on it, when it changes from 0% to 100% width on hover, you get a that nice animated effect.

j1mm1nycr1cket
  • 33
  • 5