Animated lined title

by Julien Roche

HTML

<body class="lined-title">
  <div class="lined-title__line lined-title__line--animated"></div>
  <div class="lined-title__title">My title</div>
  <div class="lined-title__line lined-title__line--animated lined-title__line--animated--alternate"></div>
</body>

CSS

html,
body {
  border: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

.lined-title {
  display: flex;
}

.lined-title__title {
  color: black;
  flex: 0 0 auto;
  margin: 0 2rem 0 2rem;
  text-align: center;
  text-transform: uppercase
}

.lined-title__line {
  border-top: 1px solid black;
  flex: 4 4 auto;
  margin-top: 0.5rem;
}

.lined-title__line--animated {
  animation: reduce-flex 3s ease-in-out infinite alternate
}

.lined-title__line--animated--alternate {
  animation-direction: alternate-reverse;
}

@keyframes reduce-flex {
  0% {
    flex-basis: 4;
    flex-grow: 4;
  }
  
  100% {
    flex-basis: 1;
     flex-grow: 1;
  }
}