​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
.animatedBox {
5
  width: 200px;
6
  padding: 20px;
7
  text-align: center;
8
  font: 24px sans-serif;
9
  color: white;
10
  background: yellowgreen;
11
  visibility: hidden;
12
  animation: myAnimation 2s linear 1s 4 forwards;
13
}
14
​
15
@keyframes myAnimation {
16
  50% {
17
    visibility: hidden;
18
  }
19
  100% {
20
    visibility: visible;
21
  }
22
}
23
</style>
24
​
25
<div class="animatedBox">Animated box</div>