<link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>

.content
  .visible
    %p 
      Hello
    %ul
      %li world !
      %li codigo !
      %li simples !
      %li .net !
View Compiled
body {
  width:100%;
  height:100%;
  position:fixed;
  background-color:#34495e;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 35px;
  line-height: 40px;
  font-family:'Muli';
  color: #ecf0f1;
  height: 160px;
  overflow:hidden;
}

.visible {
  font-weight:600;
  overflow:hidden;
  height:40px;
  padding:0 40px;
  
  &:before {
    content:'[';
    left: 0;
    line-height:40px;
  }
  &:after {
    content:']';
    position:absolute;
    right: 0;
    line-height:40px;
  }
  &:after, &:before {
    position:absolute;
    top:0;
    color:#16a085;
    font-size:42px;
    animation:2s linear 0s normal none infinite opacity;
  }
}

p {
  display:inline;
  float:left;
  margin:0;
}

ul {
  margin-top:0;
  padding-left:110px;
  text-align:left;
  list-style:none;
  animation:6s linear 0s normal none infinite change;
}

ul li {
  line-height:40px;
  margin:0;
}

@keyframes opacity {
  0%, 100%   {opacity:0;}
  50%  {opacity:1;}
}

@keyframes change {
  0%, 12%, 100%   {transform:translateY(0);}
  17%,29%  {transform:translateY(-25%);}
  34%,46%  {transform:translateY(-50%);}
  51%,63%  {transform:translateY(-75%);}
  68%,80%  {transform:translateY(-50%);}
  85%,97%  {transform:translateY(-25%);}
}
View Compiled
// By Jhonathan Souza : http://jhonathansouza.com

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.