<html>
	<head>
	</head>
	<body>
		<div class="content">
		  <div class="content__container">
		    <p class="content__container__text">Hello</p>
		    <ul class="content__container__list">
		      <li class="content__container__list__item">world !</li>
		      <li class="content__container__list__item">bob !</li>
		      <li class="content__container__list__item">users !</li>
		      <li class="content__container__list__item">everybody !</li>
		    </ul>
		  </div>
		</div>
	</body>
</html>
body{
  color:#fff;
  font-weight:bold;
  background-color:#34495E;
  position:relative;
}
.content:before{
  content: '[';
  float: left;
  position: absolute;
  left: 40%;
  animation: opacity;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}
.content:after{
  content: ']';
  float: left;
  top: 0px;
  animation: opacity;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  position: absolute;
  left: 55%;
}
.content__container {
    position: relative;
    height: 20px;
    margin-top: 175px;
    overflow: hidden;
}
.content__container__text {
    position: absolute;
    margin-left: 41%;
    margin-top: 0px;
}
.content__container__list {
    position: absolute;
    list-style-type: none;
    margin-left: 43%;
    animation-name: trans;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    margin-top: 0px;
}
@keyframes opacity{
  0%,50%{opacity:0;color:#1D1F20;}
}
@keyframes trans {
  0%, 14.66%{transform:translateY(0%)}
  16.66%, 31.32% {transform:translateY(-25%)}
  33.32%,47.98% {transform:translateY(-50%)}
  49.98%,64.64% {transform:translateY(-75%)}
  66.64%,81.30% {transform:translateY(-50%)}
  83.30%,97.96% {transform:translateY(-25%)}
}
/* Ayoub Ridouani :)*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.