z-index - HTML CSS CSS Animatable Property

Introduction

In the following code the position of the animated DIV box along the z-axis is animating from its initial value "0" to "4", and back to the initial value "0" 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 z-index Property Animation</title>
  <style type="text/css">
.container{<!--from www.ja v a 2s  . com-->
  position: relative;
}
.container div{
  width: 150px;
    height: 150px;
  padding: 5px;
  position: absolute;
  background: #76bf40;
  border: 1px solid #000;
  opacity: 0.3;
}
.container .animated {
  z-index: 0;
    background: #ffd700;
    border: 1px solid #b79b00;
  opacity: 1;
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@-webkit-keyframes test {
    50% {z-index: 4;}
}

@keyframes test {
    50% {z-index: 4;}
}
</style>
 </head>
 <body>

  <p> </p>
  <div class="container">
   <div class="animated">
    Animated Box
   </div>
   <div style="top:30px; left:30px; z-index:1;">
    z-index 1
   </div>
   <div style="top:60px; left:60px; z-index:2;">
    z-index 2
   </div>
   <div style="top:90px; left:90px; z-index:3;">
    z-index 3
   </div>
  </div>
 </body>
</html>

z-index - HTML CSS CSS Animatable Property

Introduction

Demo Code

Related Tutorials