Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!DOCTYPE html> <title>Example</title> <style> .animatedBox { font-family: sans-serif; background: beige; padding: 10px; columns: 200px 2; animation: myAnimation 1s linear 1s 1 forwards; } @keyframes myAnimation { 100% { columns: 80px 4; } } </style> <div class="animatedBox"> <p>If your browser supports the <code>columns</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 properties should change. If not, your browser either doesn't support the <code>columns</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_columns.cfm"><code>columns</code></a> property.</p> </div>
Preview