CSS3 column-rule-width (Interactive Example)

<!DOCTYPE html>
<title>Example</title>
<style>
.animatedBox {
  font-family: sans-serif;
  background: beige;
  padding: 10px;
  column-count: 3;
  column-rule: 1px solid orange;
  animation: myAnimation 1s linear 1s 1 forwards;
}

@keyframes myAnimation {
  100% {
    column-rule-width: 7px;
  }
}
</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 rule should change width. If not, your browser either doesn't support the <code>column-rule-width</code> property, or it doesn't support animations on that 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-rule-width.cfm"><code>column-rule-width</code></a> property.</p>
</div>

​x
 
<!DOCTYPE html>
<title>Example</title>
<style>
.animatedBox {
  font-family: sans-serif;
  background: beige;
  padding: 10px;
  column-count: 3;
  column-rule: 1px solid orange;
  animation: myAnimation 1s linear 1s 1 forwards;
}
​
@keyframes myAnimation {
  100% {
    column-rule-width: 7px;
  }
}
</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 rule should change width. If not, your browser either doesn't support the <code>column-rule-width</code> property, or it doesn't support animations on that 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-rule-width.cfm"><code>column-rule-width</code></a> property.</p>
</div>