line-height - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:line-height

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. line-height

Introduction

In the following code the line-height property of the following paragraph is animating from its initial value "20px" to "60px", and back to the initial value "20px" 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 CSS line-height Property Animation</title>
  <style type="text/css">
.animated {<!--from   www  . j  ava  2s.c om-->
  padding: 10px;
  line-height: 20px;
    background: #EEEEEE;
    border: 1px solid red;
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@-webkit-keyframes test {
    50% {line-height: 60px;}
}

@keyframes test {
    50% {line-height: 60px;}
}
</style>
 </head>
 <body>

  <p> </p>
  <p class="animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
 </body>
</html>

Related Tutorials