<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML.js">
  </script>
  <!-- Quantum Mechanics Typography Macros -->
  <script type='text/x-mathjax-config'>
  MathJax.Hub.Config({
  TeX: {
     Macros: {
      abs: ['\\left|{#1}\\right|',1],
      bra: ['\\langle{#1}|',1],
      ket: ['{\\,|\\,{#1}\\rangle}',1],
      braket: ['\\langle{#1}|{#2}\\rangle',2]
    }
  }});
  </script>

<div class="tree-diagram">
  <div class="column zeroth">
    <span class="orange ket">+ \( \ket{\textrm{Orange}} \)</span>
  </div>
  <div class="column first">
    <div class="split"></div>
    <span class="orange ket">+ \( \ket{\textrm{Orange}} \)</span>
    <span class="purple ket">+ \( \ket{\textrm{Purple}} \)</span>
  </div>
  <div class="column second">
    <div class="split"></div>
    <div class="split"></div>
    <span class="orange ket">+ \( \ket{\textrm{Orange}} \)</span>
    <span class="purple ket">+ \( \ket{\textrm{Purple}} \)</span>
    <span class="purple ket">- \( \ket{\textrm{Purple}} \)</span>
    <span class="orange ket">+ \( \ket{\textrm{Orange}} \)</span>
  </div>
</div>

body {
  margin: 0;
  background: #16a085;
  color: #fff;
  text-align: center;
}
.column {
  position: relative;
  float: left;
  padding: 0em 3em;
  opacity: 0;
  
}
.column.zeroth {
  animation: fadeIn0 10s infinite;
}
.column.first {
  animation: fadeIn1 10s infinite;
}
.column.second {
  animation: fadeIn2 10s infinite;
}
.ket {
  display: block;
}
.split {
  position: absolute;
  height: 50px;
  width: 50px;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
  transform: rotate(45deg);
  overflow: auto;
}
.first.column .split {
  top: 7em;
  left: -10px; 
}
.second.column .split:first-child {
  top: 3em;
  left: -10px; 
}
.second.column .split:nth-child(2) {
  top: 12em;
  left: -10px; 
}
.tree-diagram {
  display: inline-block;
  margin: 3em auto;
}

$spread: 18em;

.column.zeroth .ket {
  height: $spread;
  line-height: $spread;
}
.column.first .ket {
  height: $spread/2;
  line-height: $spread/2;
}
.column.second .ket {
  height: $spread/4;
  line-height: $spread/4;
}
.column.second .purple.ket {
  animation: interfere 10s infinite ease-in-out;
  /* animation-delay: 6s; */
}

@keyframes fadeIn0 {
  0% { opacity: 0 }
  10% { opacity: 1 }
  80% { opacity: 1 }
  90% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes fadeIn1 {
  0% { opacity: 0 }
  10% { opacity: 0 }
  20% { opacity: 1 }
  80% { opacity: 1 }
  90% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes fadeIn2 {
  0% { opacity: 0 }
  20% { opacity: 0 }
  30% { opacity: 1 }
  80% { opacity: 1 }
  90% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes interfere {
  0% { opacity: 1 }
  50% { opacity: 1 }
  52% { color: white; opacity: 1 }
  56% { color: red; opacity: 1 }
  60% { opacity: 1 }
  70% { opacity: 0 }
  100% { opacity: 0 }
}