Sticky element CSS animation example

sticky_header.less

.my-header {
  position: fixed;
  z-index: 10;

  -webkit-animation-duration:.2s;
  -moz-animation-duration:.2s;
  -o-animation-duration:.2s;
  animation-duration:.2s;
  -webkit-animation-fill-mode:both;
  -moz-animation-fill-mode:both;
  -o-animation-fill-mode:both;
  animation-fill-mode:both;

  &.slideDown {
    -webkit-animation-name:slideDown;
    -moz-animation-name:slideDown;
    -o-animation-name:slideDown;
    animation-name:slideDown
  }

  &.slideUp {
    -webkit-animation-name:slideUp;
    -moz-animation-name:slideUp;
    -o-animation-name:slideUp;
    animation-name:slideUp
  }
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform:translateY(-100%)
    }
    100% {
        -webkit-transform:translateY(0)
    }
}
@-moz-keyframes slideDown {
    0% {
        -moz-transform:translateY(-100%)
    }
    100% {
        -moz-transform:translateY(0)
    }
}
@-o-keyframes slideDown {
    0% {
        -o-transform:translateY(-100%)
    }
    100% {
        -o-transform:translateY(0)
    }
}
@keyframes slideDown {
    0% {
        transform:translateY(-100%)
    }
    100% {
        transform:translateY(0)
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform:translateY(0)
    }
    100% {
        -webkit-transform:translateY(-100%)
    }
}
@-moz-keyframes slideUp {
    0% {
        -moz-transform:translateY(0)
    }
    100% {
        -moz-transform:translateY(-100%)
    }
}
@-o-keyframes slideUp {
    0% {
        -o-transform:translateY(0)
    }
    100% {
        -o-transform:translateY(-100%)
    }
}
@keyframes slideUp {
    0% {
        transform:translateY(0)
    }
    100% {
        transform:translateY(-100%)
    }
}