​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
div {
5
  width: 200px;
6
  padding: 20px;
7
  text-align: center;
8
  font: 24px sans-serif;
9
  color: white;
10
  position: absolute;
11
}
12
​
13
.box1 {
14
  background: yellowgreen;
15
  top: 0px;
16
  left: 0px;
17
  z-index: 1;
18
  animation: myAnimation 1s ease 1s 5 alternate forwards;
19
}
20
​
21
.box2 {
22
  background: gold;
23
  top: 20px;
24
  left: 20px;
25
  z-index: 2;
26
}
27
​
28
@keyframes myAnimation {
29
  100% {
30
    z-index: 3;
31
  }
32
}
33
</style>
34
​
35
<div class="box1">Box 1 (animated)</div>
36
<div class="box2">Box 2</div>