​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
.animatedBox {
5
  font-family: sans-serif;
6
  background: beige;
7
  padding: 10px;
8
  column-count: 2;
9
  animation: myAnimation 1s linear 1s 1 forwards;
10
}
11
​
12
@keyframes myAnimation {
13
  100% {
14
    column-count: 4;
15
  }
16
}
17
</style>
18
​
19
<div class="animatedBox">
20
  <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>
21
  <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>
22
  <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>
23
  <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>
24
</div>