CSS3 - grow line animation

by Jens Kühn

HTML

<footer class="footer">
  <div class="footer__wrapper">
    <div class="footer__column">
      <div class="footer__column__line" style="transform: matrix(1, 0, 0, 1, 0, 0);"></div>
    </div>
  </div>
</footer>

CSS

.footer {
    background-color: #fff;
    bottom: 0;
    display: table;
    opacity: 0;
    padding: 9rem 0;
    position: fixed;
    visibility: hidden;
    width: 100%;
        visibility: inherit;
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}

.footer__wrapper {
  margin: auto;
  max-width: 94rem;
  visibility: inherit;
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}

.footer__column {
  display: table-cell;
  vertical-align: top;
  width: 50vw;
}

.footer__column__line {
  background-color: #ccc;
  height: 1px;
  margin-top: 1rem;
  width: 100%;
  animation: line_grow 3s linear infinite;
}

@keyframes line_grow {
    0% { transform: translate3d(0px, 0px, 0px) scale(0, 1); }
    100% { transform: translate3d(0px, 0px, 0px) scale(1, 1); }
}