A video posted by Kam Banwait (@scriptedpixels) on May 14, 2015 at 8:27am PDT

The CSS behind this is pretty straightforwards but the trick is to ensure that you have a border, with no height, set to begin with to ensure the animation is shown when hovering on and off the link. Without this 0px border in place the effect will jump to the hovered state.

I’ve used a bottom border in the example code below:

Sass

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

@mixinTransition($values...){

$transitions:();

@each$declarationin $values {

$prop:nth($declaration,1);

$prop-opts:();

$length:length($declaration);

@for$ifrom 1 through $length {

$prop-opts:append($prop-opts,nth($declaration,$i));

}

$trans:($prop,$prop-opts);

$transitions:append($transitions,$trans,comma);

}

-webkit-transition:trans-prefix($transitions,webkit);

-moz-transition:trans-prefix($transitions,moz);

-ms-transition:trans-prefix($transitions,ms);

-o-transition:trans-prefix($transitions,o);

transition:$values;

}

ul.navigation {

float:left;

margin:0;

li {

@includeTransition(border-bottom0.15sease-in);

border-bottom:0pxsolidtransparent;

height:50px;

padding:05px;

margin:010px;

&.active {

border-bottom:3pxsolid$DCBlue;

}

&:hover {

border-bottom:3pxsolidrgba($DCBlue,0.5);

}

a {

line-height:50px;

@includefont-size(1.6);

display:block;

height:100%;

}

}

}

The Sass mixin creates vendor prefixes for the CSS output as well as taking care of all other transitions used at a later date with different values.

You should be able to see that it’s a pretty simple and straightforward effect to created. The key is to have the 0px border already set to ensure the animation works.