outline-color - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:outline-color

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. outline-color

Introduction

In the following code the outline-color property of the div element is animating from its initial value "#7d7de6" to "#4b0082", and back to the initial value "#7d7de6" 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 outline-color Property Animation</title>
  <style type="text/css">
.animated {<!--from w w  w  . j  a  va  2  s.c o m-->
  width: 200px;
  padding: 60px 0;
  margin: 100px;
  font: bold 50px sans-serif;
  background: #e6e6fa;
  outline: 20px solid #7d7de6;
  text-align: center;
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@-webkit-keyframes test {
    50% {outline-color: #4b0082;}
}

@keyframes test {
    50% {outline-color: #4b0082;}
}
</style>
 </head>
 <body>

  <p> </p>
  <div class="animated">
   Box
  </div>
 </body>
</html>

Related Tutorials