<h1 class="italic"><span>We make awesome</span> <span class="themecolor">wordpress</span> <span class="ccthemplug"><i class="themes">themes</i> <b>&</b> <i class="plugins">plugins</i> </span></h1>

@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");

.italic {
  font-style: italic;
}

h1 {
  font-size: 4em;
  font-family: Lato;
  line-height: 1.2;
}
h1 span,
h1 b {
  display: inline-block;
  vertical-align: middle;
}

.ccthemplug {
  color: #26292c;
  position: relative;
  min-width: 4em;
  overflow: hidden;
}
.ccthemplug b {
  animation: offscreen 0s forwards;
}
@keyframes offscreen {
  100% {
    transform: translateX(-500px);
  }
}
.themes,
.plugins {
  position: absolute;
  left: 0;
  top:3px;
  opacity: 1;
}
.plugins {
  opacity: 0;
  animation: animplug 4s linear infinite forwards;
}
@keyframes animplug {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.themes {
  animation: animtheme 4s linear infinite;
}
@keyframes animtheme {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}