.content
  h1
    | Hello. We 
    span#word-switcher.in()
      p.glitch.active(data-text='design', data-oid='0') design
      p.glitch(data-text='develop', data-oid='1')  develop
      p.glitch(data-text='love', data-oid='2') love
    |             apps.
View Compiled
//@import 'compass/css3'
@import url(http://fonts.googleapis.com/css?family=Roboto:100,600)

// Variables
$roboto: 'Roboto', sans-serif  
$fontsize: 40px
$bg: cornflowerblue
$p: #aadff9
$w-color: rgba(255, 255, 255, 0.5)
  
$animation-opacity: 2s ease-out 0s normal none infinite opacity
$animation-change: 6s linear 0s normal none infinite change

// ! active glitch by replacing the 0 with infinite
$animation-glitch: glitch 2s 0 linear alternate-reverse
$animation-glitch-2: glitch-2 3s 0 linear alternate-reverse

$break-medium: 768px
$break-large: 1300px

//
// Easing
// @see http://matthewlein.com/ceaser/
//

// Cubic
$easeInCubic     :  cubic-bezier(0.550, 0.055, 0.675, 0.190)
$easeOutCubic    :  cubic-bezier(0.215, 0.610, 0.355, 1.000)
$easeInOutCubic  :  cubic-bezier(0.645, 0.045, 0.355, 1.000)

//to show what import 'compass/css3' does
//mixin

@mixin animation-name($name...) 
  -o-animation: $name
  -moz-animation: $name
  -webkit-animation: $name
  animation: $name


// keyframes mixin
=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

*
  margin: 0
  padding: 0

body
  display: table-cell
  vertical-align: middle
  background-color: $bg

h1
  font: 100% $roboto
  line-height: normal
  color: $p
  font-size: $fontsize + 10px
  font-weight: 100 //ups

.content
  position: absolute
  top: 50%
  left: 40%
  margin: -32px 0 0 -145px
  &::after, &::before
    color: #000
    font-size: 42px   
    @include animation-name($animation-opacity)


//.visible
  font-weight: 600
  overflow: hidden
  height: 40px

#word
  margin-top: 0
  padding-left: 110px
  text-align: left
  list-style: none
  @include animation-name($animation-change)
  li
    line-height: 40px
    margin: 0
    
// use of keyframes mixin
+keyframes(opacity)
  0%
    opacity: 0
  50%
    opacity: 1
  100%
    opacity: 0
   
// use of keyframes mixin
+keyframes(change)
  0%
    margin-top: 0

  15%
    margin-top: 0

  25%
    margin-top: -40px

  40%
    margin-top: -40px

  50%
    margin-top: -80px

  65%
    margin-top: -80px

  75%
    margin-top: -40px

  85%
    margin-top: -40px

  100%
    margin-top: 0


//@media (max-width: $break-large)
  h1
    margin-top: 80px
    margin-bottom: 80px

#word-switcher
  position: relative
  display: inline-block
  vertical-align: top
  transition: width 400ms $easeInCubic
  white-space: nowrap
  margin-right: -5px
  margin-top: 0 //12px? 
  font-weight: bold
  &.in p
    -webkit-animation: leave-word 300ms $easeOutCubic 
    -moz-animation: leave-word 300ms $easeOutCubic 
    -webkit-transform-origin: center 35px
    transform-origin: center 35px
    &.active
      -webkit-animation: enter-word 300ms 100ms $easeOutCubic 
      animation: enter-word 300ms 100ms $easeOutCubic 
  p
    visibility: hidden
    position: absolute
    left: 0
    &.active
      visibility: visible

+keyframes(leave-word)
  0%
    -webkit-transform: rotateX(0deg)
    transform: rotateX(0deg)
    visibility: visible
    opacity: 1

  100%
    -webkit-transform: rotateX(-90deg)
    transform: rotateX(-90deg)
    visibility: visible
    opacity: 0

// flip 

+keyframes(enter-word)
  0%
    -webkit-transform: rotateX(90deg)
    opacity: 0

  100%
    opacity: 1
    -webkit-transform: rotateX(0deg)
  
// glitch

.glitch
  color: white
  position: absolute
  &:after
    content: attr(data-text)
    position: absolute
    left: 2px
    text-shadow: -1px 0 red
    top: 0
    color: white
    background: $bg
    overflow: hidden
    clip: rect(0, 900px, 0, 0)
    @include animation-name($animation-glitch)
    //animation: noise-anim 2s infinite linear alternate-reverse
  
  &:before
    content: attr(data-text)
    position: absolute
    left: -2px
    text-shadow: 1px 0 blue
    top: 0
    color: white
    background: cornflowerblue
    overflow: hidden
    clip: rect(0, 900px, 0, 0)
    @include animation-name($animation-glitch-2)
    //animation: noise-anim-2 3s infinite linear alternate-reverse
  

// active Glitch

+keyframes(glitch)
  0%
    clip: rect(23px, 9999px, 17px, 0)

  5%
    clip: rect(34px, 9999px, 24px, 0)

  10%
    clip: rect(34px, 9999px, 9px, 0)

  15.0%
    clip: rect(20px, 9999px, 22px, 0)

  20%
    clip: rect(5px, 9999px, 18px, 0)

  25%
    clip: rect(15px, 9999px, 35px, 0)

  30.0%
    clip: rect(26px, 9999px, 36px, 0)

  35%
    clip: rect(26px, 9999px, 33px, 0)

  40%
    clip: rect(26px, 9999px, 5px, 0)

  45%
    clip: rect(13px, 9999px, 28px, 0)

  50%
    clip: rect(29px, 9999px, 38px, 0)

  55.0%
    clip: rect(30px, 9999px, 13px, 0)

  60.0%
    clip: rect(7px, 9999px, 36px, 0)

  65%
    clip: rect(28px, 9999px, 14px, 0)

  70%
    clip: rect(15px, 9999px, 16px, 0)

  75%
    clip: rect(8px, 9999px, 8px, 0)

  80%
    clip: rect(39px, 9999px, 2px, 0)

  85.0%
    clip: rect(20px, 9999px, 18px, 0)

  90%
    clip: rect(27px, 9999px, 8px, 0)

  95%
    clip: rect(33px, 9999px, 14px, 0)

  100%
    clip: rect(23px, 9999px, 25px, 0)


+keyframes(glitch-2)
  0%
    clip: rect(5px, 9999px, 21px, 0)

  5%
    clip: rect(38px, 9999px, 11px, 0)

  10%
    clip: rect(37px, 9999px, 18px, 0)

  15.0%
    clip: rect(11px, 9999px, 38px, 0)

  20%
    clip: rect(24px, 9999px, 13px, 0)

  25%
    clip: rect(37px, 9999px, 25px, 0)

  30.0%
    clip: rect(28px, 9999px, 40px, 0)

  35%
    clip: rect(14px, 9999px, 33px, 0)

  40%
    clip: rect(35px, 9999px, 3px, 0)

  45%
    clip: rect(23px, 9999px, 19px, 0)

  50%
    clip: rect(7px, 9999px, 18px, 0)

  55.0%
    clip: rect(18px, 9999px, 15px, 0)

  60.0%
    clip: rect(14px, 9999px, 31px, 0)

  65%
    clip: rect(29px, 9999px, 4px, 0)

  70%
    clip: rect(12px, 9999px, 2px, 0)

  75%
    clip: rect(3px, 9999px, 38px, 0)

  80%
    clip: rect(24px, 9999px, 39px, 0)

  85.0%
    clip: rect(34px, 9999px, 12px, 0)

  90%
    clip: rect(15px, 9999px, 11px, 0)

  95%
    clip: rect(10px, 9999px, 14px, 0)

  100%
    clip: rect(38px, 9999px, 21px, 0)

View Compiled
$ ->
  # word switcher
  switcher = $('#word-switcher')
  delay = 2000
  count = switcher.find('p').length

  calculateWidths = ->
    switcher.find('p').each (index) ->
      $(this).attr 'data-width', $(this).width()
      return
    switcher.width switcher.find('.active').attr('data-width')
    return

  doChange = ->
    nextItem = undefined
    currentItem = parseInt(switcher.find('.active').attr('data-oid'))
    if currentItem == count - 1
      nextItem = 0
    else
      nextItem = currentItem + 1
    switcher.addClass 'in'
    switcher.find('[data-oid="' + currentItem + '"]').removeClass 'active'
    switcher.find('[data-oid="' + nextItem + '"]').addClass 'active'
    switcher.width switcher.find('[data-oid="' + nextItem + '"]').attr('data-width')
    setTimeout doChange, delay
    return

  calculateWidths()
  $(window).resize ->
    calculateWidths()
    return
  setTimeout doChange, delay
  return
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js