We would like to know how to create animation and maintain z-index ::before.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.object {<!--from w w w. j a v a 2 s. co m-->
position: relative;
-webkit-animation: scale 1s infinite ease-in-out;
animation: scale 1s infinite ease-in-out;
}
.object::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border: 20px solid red;
z-index: 1;
}
.object::before {
content: "";
position: absolute;
width: 70px;
height: 70px;
border: 10px solid blue;
z-index: -1;
top: 20px;
left: 20px;
}
@keyframes scale {
0% {transform: scale(1, 1);}
50%{transform:scale(.5,.5);}
100%{transform:scale(1,1);}
}
@-webkit-keyframes scale {
0% {-webkit-transform: scale(1, 1);}
50%{-webkit-transform:scale(.5,.5);}
100%{-webkit-transform:scale(1,1);}
}
</style>
</head>
<body>
<div class="object"></div>
</body>
</html>
The code above is rendered as follows: