HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width:auto; border:1px solid #000; height:auto; column-count:3; column-gap:10px; -webkit-column-rule: 2px double red; /* Chrome, Safari, Opera */ -moz-column-rule: 2px double red; /* Firefox */ column-rule: 2px double red; animation: myAnimation 5s infinite; -webkit-animation: myAnimation 5s infinite; /* Safari 4.0 - 8.0 */ } @keyframes myAnimation { 50% { -webkit-column-rule: 50px double green; /* Chrome, Safari, Opera */ -moz-column-rule: 50px double green; /* Firefox */ column-rule: 50px double green; } } /* Safari 4.0 - 8.0 */ @-webkit-keyframes myAnimation { 50% { -webkit-column-rule: 50px double green; /* Chrome, Safari, Opera */ -moz-column-rule: 50px double green; /* Firefox */ column-rule: 50px double green; } } </style> </head> <body> <h1>CSS Animatable column-rule</h1> <div> Elon Musk is the co-founder and CEO at Tesla, overseeing all product design, engineering and manufacturing of the company's electric vehicles, battery products, and Solar Roofs. </div> </body> </html>
OUTPUT
×

Save as Private