column-rule-width - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:column-rule-width

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. column-rule-width

Introduction

In the following code the width of the column-rule of the following paragraph element is animating from its initial value "1px" to "20px", and back to the initial value "1px" again up to infinite times.

-webkit- prefix is for Chrome, Safari, Opera.

-moz- prefix is for Firefox.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 column-rule-width Property Animation</title>
  <style type="text/css">
.animated {<!--   ww w. j  a  va  2 s .  c  om-->
  padding: 15px;
  border: 1px solid #000;
    
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 1px solid black;
    
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule: 1px solid black;
    
    column-count: 3;
    column-gap: 100px;
    column-rule: 1px solid black;
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@-webkit-keyframes test {
    50% {-webkit-column-rule-width: 20px;}
}

@keyframes test {
    50% {column-rule-width: 20px;}
}
</style>
 </head>
 <body>

  <p> </p>
  <p class="animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, tristique sed dui mollis, porta tempus ligula. Phasellus vel orci vel arcu pellentesque fermentum. Duis bibendum metus arcu. Aliquam eget tortor vulputate, sollicitudin felis a, mollis libero. Aliquam vitae consequat sapien, id blandit lectus. Integer ac nibh ac nulla tincidunt accumsan sit amet sit amet risus. Integer id nisl urna. In a enim elementum, auctor justo quis, tincidunt augue. Donec nibh dui, congue non neque quis, semper aliquam felis. Praesent efficitur massa vel convallis euismod. Quisque metus lectus, consectetur sit amet justo in, venenatis faucibus nunc. Aenean faucibus, enim id egestas convallis, felis magna mattis est, in ultricies est urna ac nisl. Cras placerat quis tortor quis molestie. Nullam imperdiet gravida velit eget sollicitudin. Nunc dictum pretium justo vel congue. Praesent auctor leo maximus leo aliquam, eget vehicula tortor tincidunt. Vestibulum finibus venenatis dui, nec lobortis mauris convallis id. Maecenas porttitor erat tellus, at vulputate eros euismod a. In aliquam, dolor et bibendum consequat, eros felis ultricies lorem, ac fermentum arcu metus in magna. Integer auctor sapien a massa porta, et suscipit sapien sollicitudin. Maecenas vel hendrerit nibh. Curabitur convallis interdum ornare. Curabitur justo nibh, pretium ac convallis vitae, consectetur sit amet orci. Nunc non enim non ligula efficitur venenatis et at metus. Duis turpis velit, lacinia interdum purus ac, venenatis semper lacus. Aenean mattis fermentum odio ut suscipit.</p>
 </body>
</html>

Related Tutorials