JSFiddle - React, Tailwind, and code Playground

by David Sch

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class="back"></div>
<div class="box"></div>

</body>
</html>

CSS

.back {
    width: 500px;
    height: 500px;
    background-color: black;
    z-index: 100;
    position: relative
    }
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-transition-property: z-index;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 3s; /* Safari */
    transition-property: z-index;
    animation-name: example;
    animation-duration: 1s;
    animation-delay: 3s;
      animation-fill-mode: forwards;
    z-index: 101;
    position: relative;
    top: -100px;
    left: 0;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    100% {z-index: 99;}
}

/* Standard syntax */
@keyframes example {
    100% {z-index: 99;}
}