Schroedingers cat is...

Simple text animation

by schrodingers

HTML

<script src="http://fonts.googleapis.com/css?family=Oswald"></script>
<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
<div class="poster">
    <div class="cat">Schroedingers cat is</div>
    <div class="alive" data-text="dead">alive</div>
    <div class="dead">dead</div>
</div>

SCSS

$base-line: 1.5;

html {
  background: #222;
  font-size: 62.5%; 
  color: white;
  box-sizing: border-box;
}

.poster {
  font: 800 5.5rem/$base-line 'Oswald' sans-serif;
  line-height: 1.5;
  text-align: center;
  margin: 10vh auto;
}

.cat {
  font: 5.5rem/$base-line 'decor' sans cursive;
}

.alive {
  letter-spacing: 3rem;
  text-transform: uppercase;
  text-shadow: -0.05em 0 rgb(30, 242, 241), 0.05em 0 rgb(246, 5, 10);
    animation: blink 5.5s ease-out 3s infinite;
}

.dead { 
  text-transform: uppercase;
  margin-top: -4.6rem;
  letter-spacing: 2.68rem;
/*   text-shadow: -0.05em 0 rgb(30, 242, 241), 0.05em 0 rgb(246, 5, 10); */
    opacity: 1;
  animation: blink 5.5s ease-out 1s infinite;
}

@keyframes blink {
  30%{
    transform: scale(1.5);
  }
  50% {
    opacity: 0;
  }
  100%{
    letter-spacing: 2.5rem; 
    opacity: 1;
  }
}