CSS3 column-count (Interactive Example)

<!DOCTYPE html>
<title>Example</title>
<style>
.animatedBox {
  font-family: sans-serif;
  background: beige;
  padding: 10px;
  column-count: 2;
  animation: myAnimation 1s linear 1s 1 forwards;
}

@keyframes myAnimation {
  100% {
    column-count: 4;
  }
}
</style>

<div class="animatedBox">
  <p>If your browser supports the <code>column-count</code> property, this text should span across multiple columns. If it doesn't, then it will only span one long column. </p>
  <p>When the animation runs, the column count should change. If not, your browser probably doesn't support animations on the <code>column-count</code> property.</p>
  <p>You can always add browser extensions (eg, <code>-webkit-</code>, <code>-moz-</code> etc) to get it working. These have been intentionally omitted for brevity and to provide standards compliant code.</p>
  <p>For more info about adding browser extensions, see the <a href="https://web.QHMit.com/css/css3/properties/css_column-count.cfm"><code>column-count</code></a> property.</p>
</div>