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; column-count: 3; column-rule: 5px solid orange; animation: myAnimation 3s linear 1s 1 forwards; } @keyframes myAnimation { 100% { column-rule-color: olivedrab; } } </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 color. If not, your browser either doesn't support the <code>column-rule-color</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-color.cfm"><code>column-rule-color</code></a> property.</p> </div>
Preview