text-shadow - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:text-shadow

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. text-shadow

Introduction

In the following code the text-shadow property of the following heading element is animating from its initial value "2px 2px 4px #000" to "6px 6px 12px #000", and back to the initial value "2px 2px 4px #000" 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 text-shadow Property Animation</title>
  <style type="text/css">
h1 {<!--from   w  w  w .ja v a  2s. co m-->
  font: bold 50px sans-serif;
    text-shadow: 2px 2px 4px #000;
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@-webkit-keyframes test {
    50% {text-shadow: 6px 6px 12px #000;}
}

@keyframes test {
    50% {text-shadow: 6px 6px 12px #000;}
}
</style>
 </head>
 <body>

  <p> </p>
  <h1>Text Shadow Animation</h1>
 </body>
</html>

Related Tutorials